/* ==========================================================================
   tokens.css — the only place colour, type, spacing and radius are defined.
   Nothing outside this file may contain a colour literal.

   Colour lives under [data-theme="dark"] and [data-theme="light"] on <html>.
   The attribute is written into the markup as data-theme="dark", so the site
   is fully styled before any script runs and stays dark if none ever does.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------ */
  /* Google Sans and its monospace sibling, both SIL Open Font License and
     served from Google Fonts. Same superfamily pairing the design started
     with, so the rule that mono belongs only to code and the manifest's
     stack column still holds. */
  --font-sans: "Google Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs:      0.8rem;
  --fs-sm:      0.9rem;
  --fs-base:    1rem;
  --fs-md:      1.25rem;
  --fs-lg:      clamp(1.5rem, 3vw, 1.95rem);
  --fs-xl:      clamp(2rem, 5vw, 3.05rem);
  --fs-display: clamp(2.6rem, 7vw, 4.5rem);

  --lh-body:    1.65;
  --lh-heading: 1.15;
  --measure:    68ch;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  40px;
  --s8:  56px;
  --s9:  72px;
  --s10: 96px;
  --s11: 120px;
  --s12: 128px;

  /* ---- Radius (two steps, used by hierarchy, not by habit) -------------- */
  --r-sm: 4px;   /* chips, buttons, inline chrome */
  --r-md: 8px;   /* the photo frame, code blocks  */
  /* Only the glass panels use this. The rest of the site keeps its two small
     steps — a single large radius everywhere is what makes a page look
     generic, and that was the point of having only two in the first place. */
  --r-lg: 18px;

  --glass-blur: 16px;

  /* ---- Structure -------------------------------------------------------- */
  --container:  1180px;
  --gutter:     24px;

  /* Section rhythm. These were --s11/--s9 (120px/72px), which put 240px of
     empty space between every two sections and made the page 10,400px tall
     on a desktop. Body text is capped at 68ch regardless, so the width went
     up and the vertical air came down. */
  --section-y:       88px;
  --section-y-sm:    56px;
  --section-y-tight: 40px;
  --nav-h:      64px;
  --rule:       1px solid var(--border);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-theme: 200ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Dark — the default
   ========================================================================== */

[data-theme="dark"] {
  --bg:             #0F1115;
  --surface:        #171A21;
  --surface-raised: #1D212A;
  --border:         #252A34;
  --border-strong:  #333A47;

  --text:           #E8EAED;
  --text-muted:     #8B93A1;
  /* Brief specified #5C6472, which measures 3.2:1 on --bg — below AA for the
     body text that uses it (stack column, years, footer, meta strip). Raised
     to the nearest value clearing 4.5:1 on --bg, --surface and
     --surface-raised alike. */
  --text-dim:       #838B99;

  /* The accent splits in two. --accent is anything a reader must be able to
     read, or a boundary that carries state: link text, focus rings, the
     active chip's border. --accent-fill is paint that never has to be
     legible: the row hover bar, a button ground, the spine dots. In dark they
     are the same colour, so the split is invisible here; in light it is the
     difference between 4.8:1 and 2.1:1. */
  --accent:            #F59E0B;
  --accent-hover:      #FBBF24;
  --accent-fill:       #F59E0B;
  --accent-fill-hover: #FBBF24;
  --accent-dim:        rgba(245, 158, 11, 0.12);
  --on-accent-fill:    #0F1115;

  /* Glass. Used only by the stats band and the process cards. */
  --glass-bg:        rgba(255, 255, 255, 0.045);
  --glass-border:    rgba(255, 255, 255, 0.10);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-shadow:    0 24px 48px -28px rgba(0, 0, 0, 0.9);
  --ring-opacity:    0.55;
  --step-ghost:      rgba(245, 158, 11, 0.16);
  --pill-alt:        rgba(143, 54, 78, 0.26);
  /* Body copy that sits on a frosted panel over the gradient. Measured: the
     normal --text-muted lands at 4.43:1 against the brightest point inside a
     tinted step card, just under AA. This clears it at 5.33:1. */
  --text-on-glass:   #9AA2B0;

  /* Borrowed from the reference site — its magenta and crimson, at strengths
     that read as a tint rather than a repaint. Used in four places only: the
     process wash, the experience pills, the step numerals, and the alternate
     stat edge. Amber is still the accent; these never carry meaning. */
  --ref-magenta:  #D81B82;
  --ref-crimson:  #E8402A;
  --ref-edge:     #C2185B;

  /* Measured: at 0.13 the wash lifted the frosted step cards enough to drop
     muted body text to 3.12:1. Weaker, and faded out before the card grid. */
  --grad-wash:  linear-gradient(135deg,
                  rgba(216, 27, 130, 0.07) 0%,
                  rgba(232, 64, 42, 0.035) 30%,
                  transparent 58%);
  --grad-pill:  linear-gradient(100deg,
                  rgba(216, 27, 130, 0.24),
                  rgba(232, 64, 42, 0.15));
  --grad-pill-2: linear-gradient(100deg,
                  rgba(245, 158, 11, 0.20),
                  rgba(216, 27, 130, 0.14));
  --grad-num:   linear-gradient(140deg, #F08BC0 0%, #E8724A 60%, #F5A623 100%);

  /* Hero. Warm amber, deliberately a different family from the process
     section's magenta wash — two decorations in the same hue would read as
     one smear down the page. */
  --grad-hero:  radial-gradient(118% 78% at 12% 112%,
                  rgba(245, 158, 11, 0.13) 0%,
                  rgba(245, 158, 11, 0.05) 42%,
                  transparent 68%),
                radial-gradient(86% 62% at 88% -14%,
                  rgba(251, 191, 36, 0.09) 0%,
                  transparent 58%);

  /* Syntax highlighting */
  --code-string: #9BD1A4;
  --code-number: #E8B4B8;
  --code-fn:     #A9C7F0;

  color-scheme: dark;
}

/* ==========================================================================
   Light
   ========================================================================== */

[data-theme="light"] {
  --bg:             #FAFAF9;
  --surface:        #FFFFFF;
  --surface-raised: #F5F5F4;
  --border:         #E7E5E4;
  --border-strong:  #D6D3D1;

  --text:           #1C1917;
  --text-muted:     #57534E;
  --text-dim:       #6B6560;   /* 5.27:1 at worst (on --surface) — passes AA */

  --accent:            #B45309;   /* 4.60:1 at worst — readable as text      */
  --accent-hover:      #92400E;
  --accent-fill:       #F59E0B;   /* 2.06:1 — paint only, never text         */
  --accent-fill-hover: #D97706;
  --accent-dim:        rgba(245, 158, 11, 0.15);
  --on-accent-fill:    #1C1917;   /* 8.14:1 on the fill                      */

  /* Glass */
  --glass-bg:        rgba(255, 255, 255, 0.72);
  --glass-border:    rgba(255, 255, 255, 0.95);
  --glass-highlight: rgba(255, 255, 255, 1);
  --glass-shadow:    0 24px 48px -30px rgba(28, 25, 23, 0.32);
  --ring-opacity:    0.38;
  --step-ghost:      rgba(180, 83, 9, 0.18);
  --pill-alt:        rgba(143, 54, 78, 0.13);
  --text-on-glass:   #57534E;   /* light needs no lift — measured 7.27:1 */

  --ref-magenta:  #B01269;
  --ref-crimson:  #C7301C;
  --ref-edge:     #C2185B;

  --grad-wash:  linear-gradient(135deg,
                  rgba(216, 27, 130, 0.10) 0%,
                  rgba(232, 64, 42, 0.06) 42%,
                  transparent 72%);
  --grad-pill:  linear-gradient(100deg,
                  rgba(246, 187, 223, 0.60),
                  rgba(249, 201, 168, 0.60));
  --grad-pill-2: linear-gradient(100deg,
                  rgba(252, 220, 170, 0.70),
                  rgba(246, 187, 223, 0.55));
  --grad-num:   linear-gradient(140deg, #D4559B 0%, #D4542F 60%, #C27A08 100%);

  --grad-hero:  radial-gradient(118% 78% at 12% 112%,
                  rgba(245, 158, 11, 0.22) 0%,
                  rgba(251, 191, 36, 0.10) 40%,
                  transparent 66%),
                radial-gradient(86% 62% at 88% -14%,
                  rgba(253, 211, 141, 0.30) 0%,
                  transparent 56%);

  /* Syntax highlighting, darkened for a light ground */
  --code-string: #15803D;
  --code-number: #9F1239;
  --code-fn:     #1D4ED8;

  color-scheme: light;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

/* The hero gradient is positioned for a wide hero. On a narrow one most of
   both radials fall outside the box and the section reads as flat, so they
   are pulled inward and strengthened a little. */
@media (max-width: 640px) {
  [data-theme="dark"] {
    --grad-hero: radial-gradient(130% 55% at 25% 100%,
                   rgba(245, 158, 11, 0.16) 0%,
                   rgba(245, 158, 11, 0.06) 45%,
                   transparent 72%),
                 radial-gradient(110% 40% at 80% 0%,
                   rgba(251, 191, 36, 0.10) 0%,
                   transparent 62%);
  }

  [data-theme="light"] {
    --grad-hero: radial-gradient(130% 55% at 25% 100%,
                   rgba(245, 158, 11, 0.26) 0%,
                   rgba(251, 191, 36, 0.12) 45%,
                   transparent 72%),
                 radial-gradient(110% 40% at 80% 0%,
                   rgba(253, 211, 141, 0.34) 0%,
                   transparent 60%);
  }
}