/* ==========================================================================
   Brightrate — design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing and radius.
   Mirrors the Brightrate brand system (tokens.json in the brand artifact).
   If a value changes in the brand system, change it here, and only here.

   Rules of thumb (see the brand book for the full version):
   - --sun is the accent: one main button per screen. Never text on --paper.
   - Labels on a --sun fill use --on-sun.
   - --positive / --danger are for form states only.
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --paper:          #F6F8F7;  /* page background */
  --surface-raised: #FFFFFF;  /* cards, quiz panel, inputs */
  --line:           #D9E2DF;  /* hairlines, input borders */
  --ink:            #0F2725;  /* primary text */
  --ink-muted:      #4F625F;  /* secondary text, captions, disclaimers */
  --spruce:         #0F4C45;  /* brand colour */
  --spruce-soft:    #DCEFEA;  /* tinted sections */
  --on-spruce:      #FFFFFF;  /* text on spruce */
  --sun:            #FFB627;  /* accent / main CTA */
  --on-sun:         #0F2725;  /* text on sun */
  --sun-soft:       #FFF1CF;  /* highlight boxes */
  --positive:       #1E7A46;  /* success states */
  --danger:         #B42318;  /* error states */
  --link:           var(--spruce);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-sans:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Display (Bricolage, 700) */
  --text-hero:    clamp(2.125rem, 1.4rem + 3vw, 3rem);  /* 34px → 48px */
  --text-h1:      2rem;       /* 32px */
  --text-h2:      1.5rem;     /* 24px */
  /* Text (Figtree) */
  --text-lead:    1.1875rem;  /* 19px */
  --text-body:    1rem;       /* 16px */
  --text-label:   0.875rem;   /* 14px */
  --text-fine:    0.75rem;    /* 12px */

  /* ---- Spacing --------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-20: 80px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1120px;
  --measure:   65ch;  /* comfortable line length for running text */
}