/* Edvanced design tokens (polish, 2026-10-07). docs/ui.md explains them.

   One palette, from "Edvanced - Brand Guidelines.pdf" and Mitch's decisions
   (projects/polish/BRIEF.md): #0A3B1D is the primary green (buttons, links,
   accents), #002414 the brand band (header, heroes). White canvas; mint only
   for highlights and quiet panels. Amber is "not yet" and silly errors;
   error red is a wrong step only ("new" is never red).

   tests/test_tokens_contrast.py checks every text pair for 4.5:1, and the
   palette is shared with template.typ and parent_email.py (keep the names). */
:root {
  /* ---- palette ------------------------------------------------------- */
  --green-50:  #F1FFF6;   /* brand White */
  --green-100: #D3FFE9;   /* brand Neutral */
  --green-200: #CCEDDD;   /* brand Shadow */
  --green-300: #A8CBB9;
  --green-400: #5BD29A;   /* brand Highlight: decoration, never text on white */
  --green-600: #135A2E;
  --green-700: #0A3B1D;   /* primary */
  --green-800: #002414;   /* brand: bands, headers, print covers */
  --green-900: #00190F;   /* brand Dark */
  --green-950: #011209;   /* brand Black */
  --white:     #FFFFFF;

  --ink:       #1D2A22;   /* brand Grey: text */
  --muted:     #4F5E55;   /* secondary text */

  --amber:      #E2A83C;  /* attention: not yet, silly errors */
  --amber-bg:   #FBF0D9;
  --amber-text: #6B4A0B;
  --error:      #C44E38;  /* a wrong step, nothing else */
  --error-bg:   #FBE9E5;
  --error-text: #7E2F20;

  /* documented exceptions: the teacher's copy of the book */
  --answer-ink: #1B5E8C;
  --note-bg:    #FFF1A6;
  --hand-teacher: #C2410C;   /* teaching manual: the teacher's written answers */
  --hand-student: #1E3A8A;   /* teaching manual: a student's handwriting (Find the mistake) */

  /* the board's pens (book B3): what the teacher writes on the tablet.
     Green is a step brighter than the primary so it tells from black on a
     projector. */
  --pen-black:  var(--green-950);
  --pen-green:  #1E8449;
  --pen-red:    var(--error);
  --pen-hl:     var(--green-400);

  /* ---- roles --------------------------------------------------------- */
  --canvas:        #FFFFFF;   /* page */
  --surface:       #FFFFFF;   /* cards, sheets, dialogs */
  --surface-quiet: #F1FFF6;   /* quiet panels, hovered rows (= green-50) */
  --surface-mint:  #D3FFE9;   /* highlights, selected (= green-100) */
  --band:          #002414;   /* header and hero band (= green-800) */
  --band-2:        #0A3B1D;   /* a raised element on the band */
  --on-band:       #D3FFE9;   /* text on the band */
  --on-band-muted: #A8CBB9;   /* secondary text on the band */
  --primary:       #0A3B1D;
  --primary-hover: #135A2E;
  --on-primary:    #FFFFFF;
  --line:          #E1EEE6;   /* hairlines between rows */
  --line-strong:   #CCEDDD;   /* card and control borders */
  --control-line:  #A8CBB9;   /* inputs, outline buttons */
  --track:         #E8F2EC;   /* empty progress track, empty cell */
  --disabled-bg:   #E8EFEB;
  --disabled-text: #56655D;
  --scrim:         rgba(0, 25, 15, .48);

  /* ---- type ---------------------------------------------------------- */
  --font-ui: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --font-math: 'New Computer Modern Math', 'Cambria Math', serif;
  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600;  /* never 700 */

  --t-display: 300 40px/48px var(--font-ui);
  --t-h1:      600 32px/40px var(--font-ui);
  --t-h2:      500 24px/32px var(--font-ui);
  --t-h3:      600 18px/26px var(--font-ui);
  --t-body-lg: 400 17px/26px var(--font-ui);
  --t-body:    400 15px/24px var(--font-ui);
  --t-label:   600 13px/18px var(--font-ui);
  --t-caption: 400 12px/16px var(--font-ui);
  --t-quote:   italic 500 18px/28px var(--font-ui);

  /* Maths fragments are Typst SVGs with 12pt (16px) text. --math-k scales
     them to the text around them: 1 beside body text, larger in a question
     panel. One mechanism (Frag in primitives.js), never CSS zoom. */
  --math-k: 1;

  /* ---- space (4px base) ---------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --gutter: clamp(24px, 3vw, 48px);
  --content-max: 1360px;
  --topbar-h: 64px;

  /* ---- shape --------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  /* ---- elevation, tinted with the brand green ------------------------ */
  --e0: none;
  --e1: 0 1px 2px rgba(0, 36, 20, .06), 0 1px 3px rgba(0, 36, 20, .04);
  --e2: 0 2px 4px rgba(0, 36, 20, .05), 0 8px 24px rgba(0, 36, 20, .07);
  --e3: 0 4px 8px rgba(0, 36, 20, .06), 0 16px 40px rgba(0, 36, 20, .12);
  --e4: 0 8px 16px rgba(0, 36, 20, .08), 0 28px 72px rgba(0, 36, 20, .22);

  /* ---- motion -------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms;

  /* ---- focus: 2px primary ring + 4px highlight halo ------------------ */
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A3B1D, 0 0 0 8px rgba(91, 210, 154, .45);
  --focus-ring-band: 0 0 0 2px #002414, 0 0 0 4px #5BD29A;

  /* ---- control heights ----------------------------------------------- */
  --btn-h: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}