/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V4
 * Hallmark · genre: modern-minimal · macrostructure: Marquee Hero (s360 DNA)
 * theme: studied-DNA (source: https://s360digital.com/) · nav: white top bar · footer: dark
 * DNA: DM Serif Display headlines + DM Sans body · accent #4758EB · ink #292D3D
 *      dark hero + white serif headline · bold full-blue section bands · pill buttons
 * NOTE: brand colours kept as exact hex (matching the studied reference) rather than OKLCH.
 * ---------------------------------------------------------------------------
 * Marroquin Markedsføring — design tokens
 * =========================================================================== */

:root {
  /* ---- Colour · s360 palette --------------------------------------------- */
  --color-accent:        #4758eb;   /* signature indigo-blue                  */
  --color-accent-hover:  #3644cf;   /* darker on interaction                  */
  --color-accent-tint:   #eef0fe;   /* faint wash                             */
  --color-accent-ink:    #ffffff;   /* text on blue fill                      */
  --color-accent-soft:   #b9c1ff;   /* accent that reads on dark surfaces     */

  --color-ink:           #292d3d;   /* primary text                          */
  --color-ink-soft:      #494d60;   /* sub-headings                          */
  --color-muted:         #696d80;   /* secondary body, captions              */
  --color-faint:         #9a9db0;   /* meta, faint labels                    */

  --color-paper:         #ffffff;   /* base surface                          */
  --color-paper-2:       #f6f6f6;   /* light band                            */
  --color-paper-3:       #eff0f5;   /* light blue-grey band                  */
  --color-surface:       #ffffff;   /* cards                                 */
  --color-rule:          #e6e7ee;   /* hairline border                       */
  --color-rule-strong:   #d5d7e1;   /* emphasised rule                       */

  /* Dark surfaces (hero + footer) */
  --color-dark:          #14151d;   /* deep navy                             */
  --color-dark-2:        #1d1f2b;   /* raised dark panel                     */
  --color-on-dark:       #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-on-dark-faint: rgba(255, 255, 255, 0.55);
  --color-rule-dark:     rgba(255, 255, 255, 0.14);

  --color-focus:         #4758eb;

  /* ---- Type · DM Serif Display (display) + DM Sans (body/UI) -------------- */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.8rem;      /* 12.8px */
  --text-sm:   0.9rem;      /* 14.4px */
  --text-base: 1rem;        /* 16px   */
  --text-md:   1.1875rem;   /* 19px   */
  --text-lg:   1.5rem;      /* 24px   */
  --text-xl:   2rem;        /* 32px   */
  --text-2xl:  2.625rem;    /* 42px   */
  --text-3xl:  clamp(2.5rem, 2.2vw + 1.5rem, 3.75rem);
  --text-display-s: clamp(2.4rem, 3vw + 1.2rem, 3.4rem);
  --text-display:   clamp(2.9rem, 4.4vw + 1rem, 4.75rem);

  /* Scale for the authority layer: hero, hero stats, blue band, client
     marquee, and the giant footer wordmark. */
  --text-hero:    clamp(2.75rem, 4.2vw + 1.1rem, 5.5rem);
  --text-stat:    clamp(2.25rem, 1.5vw + 1.5rem, 2.875rem);
  --text-band:    clamp(2.6rem, 3vw + 1.4rem, 4.25rem);
  --text-marquee: clamp(1.6rem, 1.5vw + 1.1rem, 2.4rem);
  --text-word:    clamp(3.25rem, 11vw, 9.5rem);

  --leading-tight: 1.08;
  --leading-snug:  1.18;
  --leading-body:  1.6;
  --tracking-tight: -0.005em;
  --tracking-label: 0.12em;

  /* ---- Space · 4pt scale ------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8.5rem;

  /* ---- Radii ------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  560ms;
  --dur-marquee: 36s;

  /* ---- Shadow ------------------------------------------------------------ */
  --shadow-accent: 0 14px 28px -14px rgba(71, 88, 235, 0.6);

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1240px;
  --measure: 60ch;
  --nav-height: 4.75rem;

  /* ---- Z-index ----------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-menu: 300;
  --z-top: 400;
}