/* EconIB design tokens.
   Deliberately small. If either of these counts grows past what is here, that
   is an accumulation, not a system — see tests/design.test.mjs, which fails
   the build if the counts drift.
     type sizes: 7      radii: 4      elevations: 2      accent hues: 4 */

:root {
  color-scheme: light dark;

  /* --- type scale: 7 sizes, anchored on 15px body --- */
  --t-xs:   0.75rem;   /* 12 - labels, chips, table headers */
  --t-sm:   0.8125rem; /* 13 - secondary text, captions */
  --t-base: 0.9375rem; /* 15 - body */
  --t-md:   1.0625rem; /* 17 - lead paragraphs */
  --t-lg:   1.3125rem; /* 21 - section headings */
  --t-xl:   1.6875rem; /* 27 - page headings */
  --t-2xl:  2.5rem;    /* 40 - display */

  /* --- spacing: 4px base unit --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* --- radii: 4. Buttons sit at 8px, cards at 12px, and the pill is reserved
     for status badges — a pill button is one of the surest AI-site tells. --- */
  --r-sm: 4px;    /* chips, code, small tags */
  --r-md: 8px;    /* buttons, inputs */
  --r-lg: 12px;   /* cards, panels */
  --r-full: 9999px; /* status badges ONLY, never buttons */

  /* --- motion: 3 durations, 2 curves ---
     Anything faster than ~120ms reads as a jump; anything past ~260ms reads as
     lag. Entrances ease out; state changes use the standard curve. --- */
  --motion-fast: 120ms;
  --motion: 170ms;
  --motion-slow: 260ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- elevation: 2 --- */
  --e-1: 0 1px 2px rgb(20 25 30 / 0.06);
  --e-2: 0 4px 16px rgb(20 25 30 / 0.10);

  /* --- families --- */
  --f-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- surface + ink --- */
  --paper: #FBFAF7;
  --raised: #FFFFFF;
  --sunken: #F4F2ED;
  --ink: #16191D;
  --muted: #5A6470;
  --rule: #E2E1DC;
  --rule-soft: #EFEEE9;

  /* --- 4 semantic hues, each with a wash --- */
  --accent: #12507A;      --accent-wash: #E6EEF4;
  --on-accent: #FFFFFF;   /* text on an --accent fill */
  --good: #17614A;        --good-wash: #E3EFEA;
  --warn: #8A5A08;        --warn-wash: #F8EFDC;
  --bad: #A03226;         --bad-wash: #F8E9E6;

  --focus: #12507A;

  /* --- unit colours: wayfinding, not decoration ---
     Each syllabus unit keeps one hue everywhere it appears, so a student learns
     "green means macro" and can find things by colour before reading a word. */
  --u1: #6B5B95;  --u1-wash: #EFECF5;
  --u2: #12507A;  --u2-wash: #E6EEF4;
  --u3: #1C6B4A;  --u3-wash: #E4F0EA;
  --u4: #A05A1E;  --u4-wash: #F7EDE2;

  /* --- motion: one duration scale, one curve --- */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
}

/* Dark redefines tokens only. No colour is defined for the first time here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12151A;
    --raised: #191D24;
    --sunken: #0D1015;
    --ink: #E6E9EC;
    --muted: #98A2AE;
    --rule: #2A313A;
    --rule-soft: #1E242B;
    --accent: #6FB2DC;      --accent-wash: #12283A;
    --on-accent: #0D1015;
    --good: #55C79E;        --good-wash: #102C24;
    --warn: #D7A44E;        --warn-wash: #2C2416;
    --bad: #E58B7B;         --bad-wash: #33201D;
    --focus: #6FB2DC;
    --u1: #A99BC9;  --u1-wash: #241F33;
    --u2: #6FB2DC;  --u2-wash: #12283A;
    --u3: #5FC098;  --u3-wash: #102C22;
    --u4: #D9A166;  --u4-wash: #2E2318;
    --e-1: 0 1px 2px rgb(0 0 0 / 0.40);
    --e-2: 0 4px 16px rgb(0 0 0 / 0.50);
  }
}

:root[data-theme="dark"] {
  --paper: #12151A;
  --raised: #191D24;
  --sunken: #0D1015;
  --ink: #E6E9EC;
  --muted: #98A2AE;
  --rule: #2A313A;
  --rule-soft: #1E242B;
  --accent: #6FB2DC;      --accent-wash: #12283A;
  --on-accent: #0D1015;
  --good: #55C79E;        --good-wash: #102C24;
  --warn: #D7A44E;        --warn-wash: #2C2416;
  --bad: #E58B7B;         --bad-wash: #33201D;
  --focus: #6FB2DC;
  --u1: #A99BC9;  --u1-wash: #241F33;
  --u2: #6FB2DC;  --u2-wash: #12283A;
  --u3: #5FC098;  --u3-wash: #102C22;
  --u4: #D9A166;  --u4-wash: #2E2318;
  --e-1: 0 1px 2px rgb(0 0 0 / 0.40);
  --e-2: 0 4px 16px rgb(0 0 0 / 0.50);
}