/* WorksheetHub — design tokens
   Single source of truth for colour, type, spacing and elevation.
   Every other stylesheet consumes these variables; never hard-code a hex. */

:root {
  /* Brand palette (from the WorksheetHub visual identity) */
  --primary:        #6366F1;
  --primary-dark:   #4F46E5;
  --primary-light:  #E0E7FF;
  --primary-tint:   #EEF2FF;
  --secondary:      #10B981;
  --secondary-light:#D1FAE5;
  --accent:         #F59E0B;
  --accent-light:   #FEF3C7;
  --danger:         #EF4444;
  --danger-light:   #FEE2E2;

  /* Surfaces & text */
  --bg:             #F8FAFC;
  --surface:        #FFFFFF;
  --surface-2:      #F1F5F9;
  --text:           #0F172A;
  --text-2:         #475569;
  --text-3:         #5B6B80;

  /* Ink for text sitting ON a tinted panel of the same hue. The tint colours
     are pale, so the brand mid-tones fail AA on them; these are the darkened
     versions that pass. Checked by tools/check-contrast.mjs. */
  --brand-ink:      #4338CA;
  --ok-ink:         #047857;
  --warn-ink:       #B45309;
  --bad-ink:        #B91C1C;
  --link:           #4F46E5;
  --btn-ink:        #4F46E5;
  --btn-ink-hover:  #4338CA;
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;

  /* Diagram palette. Figures are line art with flat tints so they read the
     same on screen, in dark mode and on a printed sheet. Kept separate from
     the brand tokens because a diagram is information, not decoration: these
     have to stay distinguishable from one another, not match the buttons. */
  --fig-bg:         #FFFFFF;
  --fig-line:       #334155;
  --fig-text:       #0F172A;
  --fig-tint:       #EEF2FF;
  --fig-accent:     #C7D2FE;
  --fig-deep:       #A5B4FC;
  --fig-warm:       #FDE68A;
  --fig-cool:       #BAE6FD;
  --fig-leaf:       #BBF7D0;
  --fig-accent-line:#4F46E5;
  --fig-cool-line:  #7DD3FC;

  /* Typography */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-math: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.25rem;
  --step-5:  clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);

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

  /* Shape & elevation */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-2: 0 4px 16px rgba(15, 23, 42, .07);
  --shadow-3: 0 12px 32px rgba(15, 23, 42, .10);
  --ring: 0 0 0 3px rgba(99, 102, 241, .35);

  /* Brand tile gradient, taken from the app icon. These are brand colours,
     not theme surfaces: they must stay dark in light AND dark mode, because a
     band that inverts turns white text on white ground. */
  --band-from:      #4B3FD4;
  --band-to:        #161F8C;
  --band-text:      #FFFFFF;
  --band-text-2:    #C7CBF2;

  --maxw: 1200px;
  --header-h: 68px;
}

/* Dark theme. Roles stay identical, only the values swap. */
[data-theme="dark"] {
  --primary:        #818CF8;
  --primary-dark:   #6366F1;
  --primary-light:  #312E81;
  --primary-tint:   #1E1B4B;
  --secondary:      #34D399;
  --secondary-light:#064E3B;
  --accent:         #FBBF24;
  --accent-light:   #422006;
  --danger:         #F87171;
  --danger-light:   #450A0A;

  --bg:             #0B1120;
  --surface:        #111827;
  --surface-2:      #1E293B;
  --text:           #F1F5F9;
  --text-2:         #A9B4C4;
  --text-3:         #94A3B8;

  --brand-ink:      #A5B4FC;
  --ok-ink:         #6EE7B7;
  --warn-ink:       #FCD34D;
  --bad-ink:        #FCA5A5;
  --link:           #A5B4FC;
  --btn-ink:        #4F46E5;
  --btn-ink-hover:  #4338CA;
  --border:         #1E293B;
  --border-strong:  #334155;

  /* Dark mode keeps the same hues at the same *relative* lightness: the tints
     become the dark end and the lines the light end, so a diagram inverts as a
     whole rather than turning into black shapes on a dark page. */
  --fig-bg:         #111827;
  --fig-line:       #CBD5E1;
  --fig-text:       #F1F5F9;
  --fig-tint:       #1E1B4B;
  --fig-accent:     #3730A3;
  --fig-deep:       #4338CA;
  --fig-warm:       #78350F;
  --fig-cool:       #0C4A6E;
  --fig-leaf:       #14532D;
  --fig-accent-line:#A5B4FC;
  --fig-cool-line:  #0369A1;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------
   Audience modes. Section 22 of the plan: student-facing is warmer
   and rounder, teacher-facing is denser and more sober — but both
   keep the same brand palette so they read as one product.
   --------------------------------------------------------------- */
[data-mode="teacher"] {
  --r-md: 8px; --r-lg: 10px; --r-xl: 14px;
  --bg: #F1F5F9;
}
[data-mode="teacher"][data-theme="dark"] { --bg: #0B1120; }

/* Age band tuning. Applied to <body> on grade-scoped pages so the site
   grows up with the student without changing brand. */
[data-band="early"]  { --step-0: 1.0625rem; --step-1: 1.1875rem; --r-lg: 22px; --r-xl: 30px; }
[data-band="upper"]  { --r-lg: 14px; --r-xl: 18px; }