/* ==================================================================
   tokens.css — the whole palette and type scale, in one place.
   Direction B: charcoal grounds, floodlight amber, tabular figures.

   Dark grounds (hero, CTA, footer) are FIXED — they are dark in both
   themes by design. Only the "paper" surfaces flip with the theme.
   ================================================================== */

:root {
  /* Fixed dark grounds — identical in light and dark themes. */
  --dark:      #101418;
  --dark-2:    #171d23;
  --dark-3:    #1e252d;
  --dark-line: #262e37;
  --on-dark:   #ffffff;
  --on-dark-2: #9aa6b3;
  --on-dark-3: #6d7885;

  /* Accent. --amber sits on dark; --amber-ink is the darkened variant
     that meets contrast on light surfaces. Never swap them. */
  --amber:     #ffb020;
  --amber-hi:  #ffc24d;
  --amber-ink: #8a5700;
  --amber-wash:#fff5e2;

  /* Semantic signals, deliberately separate from the accent. */
  --good:      #17734f;
  --good-wash: #e6f2ec;
  --warn:      #8a5700;
  --warn-wash: #fdf1de;
  --bad:       #9c2b24;
  --bad-wash:  #fbeae8;

  /* Paper surfaces — these flip with the theme. */
  --paper:     #ffffff;
  --paper-2:   #f7f8f9;
  --ink:       #10151a;
  --body:      #4d5865;
  --faint:     #7a8694;
  --line:      #e2e6ea;
  --line-soft: #eef1f4;

  --focus:     #2b7fff;

  /* Type scale — 1.25 ratio, capped so headings stay in proportion. */
  --t-xs:   11.5px;
  --t-sm:   13px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   clamp(26px, 3.4vw, 36px);
  --t-2xl:  clamp(32px, 5vw, 52px);
  --t-3xl:  clamp(40px, 7.2vw, 84px);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Spacing — 4px base. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --radius: 4px;
  --radius-lg: 8px;
  --wrap: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #0c0f12;
    --paper-2:   #12171c;
    --ink:       #eef1f4;
    --body:      #a3aeba;
    --faint:     #7e8a97;
    --line:      #242b33;
    --line-soft: #1a2026;

    /* On dark paper the accent must lighten and the washes must darken. */
    --amber-ink: #ffb020;
    --amber-wash:#2a1f08;
    --good:      #4fbf90;
    --good-wash: #12291f;
    --warn:      #e0a955;
    --warn-wash: #2a2113;
    --bad:       #e58a80;
    --bad-wash:  #2c1614;
    --focus:     #6ea8ff;
  }
}

/* The viewer's explicit toggle must beat the media query in BOTH
   directions, so each theme is restated here. */
:root[data-theme="dark"] {
  --paper: #0c0f12; --paper-2: #12171c;
  --ink: #eef1f4; --body: #a3aeba; --faint: #7e8a97;
  --line: #242b33; --line-soft: #1a2026;
  --amber-ink: #ffb020; --amber-wash: #2a1f08;
  --good: #4fbf90; --good-wash: #12291f;
  --warn: #e0a955; --warn-wash: #2a2113;
  --bad: #e58a80; --bad-wash: #2c1614;
  --focus: #6ea8ff;
}

:root[data-theme="light"] {
  --paper: #ffffff; --paper-2: #f7f8f9;
  --ink: #10151a; --body: #4d5865; --faint: #7a8694;
  --line: #e2e6ea; --line-soft: #eef1f4;
  --amber-ink: #8a5700; --amber-wash: #fff5e2;
  --good: #17734f; --good-wash: #e6f2ec;
  --warn: #8a5700; --warn-wash: #fdf1de;
  --bad: #9c2b24; --bad-wash: #fbeae8;
  --focus: #2b7fff;
}