/* ============================================================================
   OneMediaKit — design tokens (package B). Light only, by decision.
   Source of truth: docs/design-tokens.md. Fixed values from
   docs/build-contracts.md §1 are marked "§1" and must not change here.

   Consumers: assets/site.css (C), assets/upgrade.css (D2), the kit renderer
   (E), the console. Load order: fonts/fonts.css, then tokens.css, then the
   consumer stylesheet. No classes are defined here except the two base
   rules at the end (tabular figures, reduced motion) that the contract
   makes global.
   ============================================================================ */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------ colour §1 */
  --ink:        #141414;   /* §1 text, headlines, primary surfaces           */
  --ink-2:      #4A4A46;   /* §1 secondary text                              */
  --paper:      #F7F4EE;   /* §1 page background                             */
  --paper-2:    #EFEAE1;   /* §1 section alternation, cards                  */
  --line:       #DAD4C8;   /* §1 hairlines, table rules                      */
  --accent:     #E4572E;   /* §1 vermilion: fills, marks, display accents    */
  --danger:     #B42318;   /* §1 errors only                                 */
  --verified:   #1B8A5A;   /* §1 RESERVED: verified badges and sync stamps   */
  --verified-bg:#E3F3EA;   /* §1 RESERVED: the badge/stamp background        */

  /* --------------------------------------------- colour, derived (B adds) */
  --ink-3:        #7A7A74; /* placeholders, disabled text, captions (4.6:1)  */
  --paper-0:      #FFFFFF; /* the kit card and inputs sit on white           */
  --line-2:       #C9C2B4; /* input borders, stronger rules                  */
  --accent-strong:#B83A18; /* AA-safe vermilion: button fill, link hover     */
  --accent-soft:  #FBE9E2; /* highlight wash behind a mark or a count-up     */
  --verified-ink: #146B45; /* badge/stamp TEXT (5.7:1 on --verified-bg)      */
  --danger-soft:  #FCEBEA; /* error field background                         */
  --on-accent:    #FFFFFF; /* text on --accent-strong                        */
  --on-ink:       #F7F4EE; /* text on --ink                                  */
  --focus:        var(--accent-strong);

  /* ------------------------------------------------------------------ type */
  --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', Arial, Helvetica, sans-serif;
  --font-text:    'Inter', 'Inter Fallback', Arial, Helvetica, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* sizes: mobile → desktop through clamp; body 15 → 17 */
  --text-micro:   0.75rem;                              /* 12px  stamps, fine print   */
  --text-small:   0.8125rem;                            /* 13px  captions, eyebrow    */
  --text-base:    clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem); /* 15 → 17px */
  --text-lede:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);       /* 17 → 20px */
  --text-h3:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20 → 24px */
  --text-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);        /* 28 → 40px */
  --text-h1:      clamp(2.5rem, 1.9rem + 3vw, 4.5rem);           /* 40 → 72px */
  --text-display: clamp(3rem, 2rem + 5vw, 6rem);                 /* 48 → 96px, the kit total */
  --text-stat:    clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);        /* 28 → 40px, StatTile value */

  --leading-tight:   1.05;  /* h1, display                */
  --leading-heading: 1.15;  /* h2, h3                     */
  --leading-body:    1.55;  /* body                       */
  --leading-loose:   1.7;   /* long-form legal, FAQ       */

  --tracking-display: -0.02em; /* ONLY at --text-h1 and above          */
  --tracking-heading: -0.01em; /* h2                                    */
  --tracking-eyebrow:  0.12em; /* eyebrow, uppercase                    */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-display: 600;  /* Bricolage at 600 reads confident, not shouty */

  /* --------------------------------------------------------------- spacing */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-5:  1.5rem;   /*  24px */
  --space-6:  2rem;     /*  32px */
  --space-7:  3rem;     /*  48px */
  --space-8:  4rem;     /*  64px */
  --space-9:  6rem;     /*  96px */
  --space-10: 8rem;     /* 128px */
  --section-y: clamp(3rem, 8vw, 6rem);       /* vertical rhythm between blocks */
  --gutter:    clamp(1rem, 4vw, 2rem);       /* page side padding              */

  /* ---------------------------------------------------------------- layout */
  --container: 70rem;   /* 1120px marketing */
  --measure:   40rem;   /* 640px prose      */
  --kit-width: 45rem;   /* 720px public kit */
  --nav-height: 3.75rem;
  --sticky-cta-height: 4.25rem;

  /* ---------------------------------------------------------------- radius */
  --radius-1: 6px;      /* chips, inputs, stamps */
  --radius-2: 10px;     /* buttons, cards        */
  --radius-3: 16px;     /* kit cards, modals     */
  --radius-pill: 999px;

  /* ---------------------------------------------------------------- shadow */
  /* Warm ink shadows, low alpha. Prefer a --line hairline to a shadow. */
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-2: 0 4px 16px rgba(20, 20, 20, 0.08);
  --shadow-3: 0 16px 48px rgba(20, 20, 20, 0.12);
  --ring: 0 0 0 3px rgba(184, 58, 24, 0.28);   /* focus ring halo around --focus */

  /* ---------------------------------------------------------------- motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 150ms;   /* hover, focus            */
  --dur-2: 240ms;   /* reveal, sticky CTA      */
  --dur-3: 600ms;   /* before/after cross-fade */
  --dur-count: 900ms; /* count-up               */

  /* --------------------------------------------------------------- z-index */
  --z-header: 900;
  --z-sticky-cta: 910;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Global by contract: figures line up everywhere (kits are full of numbers). */
html {
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

/* Motion is opt-in by the visitor's OS setting. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-count: 0ms;
  }
}