@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Comic+Neue:wght@300;400;700&display=swap');

/* AcumenTutor kid-centred design tokens (PR-1 kid UX redesign).
   WCAG AA text contrast enforced; Okabe-Ito status colours with icon+word;
   one action colour (blue); no red in kid app; 48px touch targets.
   
   Legacy alias block at end maps old names (--primary, --cta, --bg) to new
   tokens so Phase 1 ships without selector changes. */

:root, [data-theme="light"] {
  /* ── Colour (light theme) ─────────────────────────────────────────────── */
  /* Core text and surfaces */
  --ink: #15223B;              /* body text, 15.86:1 on surface */
  --ink-2: #45526B;            /* secondary text, 7.86:1 on surface */
  --ink-3: #5C6B86;            /* tertiary text (15px min), 5.38:1 on surface */
  --surface: #FFFFFF;          /* card background */
  --paper: #F4F6FA;            /* page background */
  --surface-2: #E8ECF4;        /* track/inactive fills */
  
  /* Action colour (one primary action, no orange CTA) */
  --blue: #1F4FD1;             /* primary fill, links, focus: 6.78:1 white text, 6.27:1 on paper */
  --blue-strong: #173FAB;      /* hover, text on blue-tint: 8.99:1 white, 7.53:1 on blue-tint */
  --blue-tint: #E4EBFB;        /* button bg, current nav pill */
  
  /* Status colours (Okabe-Ito set, darkened to pass text contrast, always icon+word) */
  --amber: #B86E00;            /* not-yet icon/border (UI only), 3.99:1 on surface, 3.61:1 on tint */
  --amber-text: #6A4100;       /* not-yet text, 8.04:1 on amber-tint, 8.86:1 on surface */
  --amber-tint: #FFF3D6;       /* not-yet background */
  --amber-ink: #8A5200;        /* amber chip text, 6.39:1 on surface */
  --on-secondary: #FFFFFF;     /* text on --secondary (amber-ink) fills: 6.39:1 */
  
  --green: #1A7F57;            /* got-it icon/fill/text, 4.98:1 white, 4.98:1 on surface */
  --green-text: #0F5A3C;       /* got-it text on tint, 7.09:1 on green-tint */
  --green-tint: #DDF3E8;       /* got-it background */
  
  --sky: #2A7FB8;              /* hint icon/border (UI only), 4.35:1 on surface, 3.78:1 on tint */
  --sky-text: #0E4D73;         /* hint text, 7.83:1 on sky-tint */
  --sky-tint: #E3F1FA;         /* hint background */
  
  --plum: #7B4FB5;             /* parent area accent, 5.79:1 on surface */
  --plum-text: #4E2E80;        /* parent accent text, 8.63:1 on plum-tint */
  --plum-tint: #EFE7FA;        /* parent tint */
  
  --red: #C81E1E;              /* destructive (adult shells only): 5.51:1 on surface */
  --red-text: #991515;         /* destructive text: 7.42:1 on surface */
  --red-tint: #FEE7E7;         /* destructive background */
  
  /* UI structure */
  --line-strong: #5C6B86;      /* input borders, required outlines: 5.38:1 on surface */
  --line: #C9D2E0;             /* decorative dividers only (1.52:1, never a required boundary) */
  --focus: #1F4FD1;            /* focus ring: 6.27:1 on paper, 6.78:1 on surface */
  
  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font-ui: Atkinson Hyperlegible, Lexend, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-math: 'Cambria Math', 'STIX Two Math', 'Times New Roman', Georgia, serif;
  --font-code: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  
  --text-sm: 15px;             /* chips, captions; nothing smaller in kid app */
  --text-body: 17px;           /* body, grades 3-8 */
  --text-lg: 20px;             /* step prompts, list titles */
  --text-xl: 24px;             /* screen titles */
  --text-2xl: 30px;            /* greeting, done title */
  --text-math: 22px;           /* active-step math (20-24 band) */
  --text-math-lg: 28px;        /* pinned problem tablet/desktop, practice problem */
  
  /* ── Spacing, radii, elevation, motion, targets ───────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  
  --radius-sm: 8px;            /* chips, small controls */
  --radius-md: 12px;           /* buttons, inputs, keys, cards */
  --radius-lg: 16px;           /* sheets, hero */
  --radius-pill: 999px;        /* nav, chips */
  
  --shadow-1: 0 1px 2px rgba(21, 34, 59, 0.04);        /* subtle */
  --shadow-2: 0 2px 4px rgba(21, 34, 59, 0.06);        /* active step, practice card */
  --shadow-3: 0 4px 8px -2px rgba(21, 34, 59, 0.08);   /* upward shadow for bottom bar */
  --shadow-sheet: 0 8px 24px rgba(21, 34, 59, 0.12);   /* dialogs */
  
  --motion-quick: 120ms;       /* press, hover */
  --motion-base: 200ms;        /* card, sheet entrance */
  --motion-slow: 320ms;        /* progress fill */
  --motion-celebrate: 1200ms;  /* done tick */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  --target-min: 48px;          /* minimum touch target */
  --target-keypad: 56px;       /* keypad keys, primary buttons, K-2 band */
  
  /* ── Breakpoints ──────────────────────────────────────────────────────── */
  --bp-tablet: 600px;          /* side rail */
  --bp-desktop: 840px;         /* right pane */
  --bp-wide: 1200px;           /* keypad collapsed when fine pointer present */
  
  /* ── Phase 50 layout tokens (unchanged) ──────────────────────────────── */
  --app-shell-max-width: 960px;
  --prose-measure: 75ch;
}

/* ── Dark theme (Phase 0, unchanged for PR-1) ──────────────────────────── */
[data-theme="dark"] {
  --ink: #E2E8F0;
  --ink-2: #94A3B8;
  --ink-3: #64748B;
  --surface: #1E293B;
  --paper: #0F172A;
  --surface-2: #334155;
  
  --blue: #60A5FA;
  --blue-strong: #93C5FD;
  --blue-tint: #1E3A8A;
  
  --amber: #FFA500;
  --amber-text: #FFC107;
  --amber-tint: #451A03;
  --amber-ink: #FFA500;
  --on-secondary: #0F172A;     /* dark text on #FFA500: 9.04:1 */
  
  --green: #34D399;
  --green-text: #6EE7B7;
  --green-tint: #064E3B;
  
  --sky: #60A5FA;
  --sky-text: #93C5FD;
  --sky-tint: #1E3A8A;
  
  --plum: #C084FC;
  --plum-text: #E9D5FF;
  --plum-tint: #581C87;
  
  --red: #F87171;              /* destructive in dark (as main), 5.29:1 on #1E293B */
  --red-text: #FCA5A5;
  --red-tint: #450A0A;
  
  --line-strong: #64748B;
  --line: #334155;
  --focus: #60A5FA;
  
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 4px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ── High-contrast theme (Phase 0, unchanged for PR-1) ─────────────────── */
[data-theme="hc"] {
  --ink: #000000;
  --ink-2: #000000;
  --ink-3: #000000;
  --surface: #FFFFFF;
  --paper: #FFFFFF;
  --surface-2: #F0F0F0;
  
  --blue: #000000;
  --blue-strong: #000000;
  --blue-tint: #E0E0E0;
  
  --amber: #664400;
  --amber-text: #000000;
  --amber-tint: #FFEECC;
  --amber-ink: #000000;
  --on-secondary: #FFFFFF;
  
  --green: #006400;
  --green-text: #000000;
  --green-tint: #CCFFCC;
  
  --sky: #000080;
  --sky-text: #000000;
  --sky-tint: #CCDDFF;
  
  --plum: #4B0082;
  --plum-text: #000000;
  --plum-tint: #E6CCFF;
  
  --red: #8B0000;              /* destructive in hc (as main) */
  --red-text: #8B0000;
  --red-tint: #FFE0E0;
  
  --line-strong: #000000;
  --line: #666666;
  --focus: #000000;
  
  --shadow-1: 0 0 0 1px #000000;
  --shadow-2: 0 0 0 2px #000000;
  --shadow-3: 0 0 0 2px #000000;
  --shadow-sheet: 0 0 0 3px #000000;
}

/* ── Legacy alias block (PR-1: maps old names → new tokens) ────────────── */
/* Phase 1 ships without selector changes; later phases retire these aliases. */
:root, [data-theme="light"] {
  --primary: var(--blue);
  --primary-light: var(--blue-strong);
  --on-primary: #FFFFFF;
  --cta: var(--blue);          /* retired orange CTA; one action colour now */
  --cta-hover: var(--blue-strong);
  --on-cta: #FFFFFF;
  --secondary: var(--amber-ink);
  --accent: var(--plum);
  --success: var(--green);
  --destructive: var(--red);    /* adult shells (teacher, operator): red for destructive */
  --bg: var(--paper);
  --fg: var(--ink);
  --card: var(--surface);
  --card-fg: var(--ink);
  --muted: var(--surface-2);
  --muted-fg: var(--ink-2);
  --border: var(--line);
  
  /* Phase 0 clay/radii unchanged for PR-1 */
  --radius-outer: 32px;
  --radius-card: 24px;
  --radius-btn: 20px;
  --radius-input: 16px;
  --shadow-clay: 6px 6px 16px rgba(37, 99, 235, 0.08), -3px -3px 10px rgba(255, 255, 255, 0.9);
  --shadow-clay-hover: 8px 8px 24px rgba(37, 99, 235, 0.12), -4px -4px 14px rgba(255, 255, 255, 1);
  --shadow-clay-sm: 3px 3px 8px rgba(37, 99, 235, 0.06), -2px -2px 6px rgba(255, 255, 255, 0.8);
  --shadow-pressed: inset 2px 2px 6px rgba(37, 99, 235, 0.1), inset -1px -1px 3px rgba(255, 255, 255, 0.3);
  
  --font-heading: 'Baloo 2', cursive, system-ui;
  --font-body: 'Comic Neue', cursive, system-ui;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
  --primary: var(--blue);
  --primary-light: var(--blue-strong);
  --on-primary: #0B1220;
  --cta: var(--blue);
  --cta-hover: var(--blue-strong);
  --on-cta: #0B1220;
  --secondary: var(--amber-ink);
  --accent: var(--plum);
  --success: var(--green);
  --destructive: var(--red);
  --bg: var(--paper);
  --fg: var(--ink);
  --card: var(--surface);
  --card-fg: var(--ink);
  --muted: var(--surface-2);
  --muted-fg: var(--ink-2);
  --border: var(--line);
  --shadow-clay: 6px 6px 16px rgba(0, 0, 0, 0.35), -3px -3px 10px rgba(255, 255, 255, 0.03);
  --shadow-clay-hover: 8px 8px 24px rgba(0, 0, 0, 0.45), -4px -4px 14px rgba(255, 255, 255, 0.04);
  --shadow-clay-sm: 3px 3px 8px rgba(0, 0, 0, 0.3), -2px -2px 6px rgba(255, 255, 255, 0.02);
}

[data-theme="hc"] {
  --primary: var(--blue);
  --primary-light: var(--blue-strong);
  --on-primary: #FFFFFF;
  --cta: var(--blue);
  --cta-hover: var(--blue-strong);
  --on-cta: #FFFFFF;
  --secondary: var(--amber-ink);
  --accent: var(--plum);
  --success: var(--green);
  --destructive: var(--red);
  --bg: var(--paper);
  --fg: var(--ink);
  --card: var(--surface);
  --card-fg: var(--ink);
  --muted: var(--surface-2);
  --muted-fg: var(--ink-2);
  --border: var(--line-strong);  /* hc keeps a black border as on main */
  --shadow-clay: 0 0 0 2px #000000;
  --shadow-clay-hover: 0 0 0 3px #000000;
  --shadow-clay-sm: 0 0 0 1px #000000;
}

/* ── Phase 29 NOTE-02: Source-color accent tokens (unchanged) ──────────── */
:root, [data-theme="light"] {
  --source-color-chat:     #3B82F6;
  --source-color-kb-chat:  #A855F7;
  --source-color-research: #14B8A6;
  --source-color-cowriter: #F59E0B;
  --source-color-book:     #10B981;
  --source-color-journey:  #EC4899;
  --source-color-solve:    #F97316;
  --source-color-quiz:     #EF4444;
}

[data-theme="dark"] {
  --source-color-chat:     #60A5FA;
  --source-color-kb-chat:  #C084FC;
  --source-color-research: #2DD4BF;
  --source-color-cowriter: #FBBF24;
  --source-color-book:     #34D399;
  --source-color-journey:  #F472B6;
  --source-color-solve:    #FB923C;
  --source-color-quiz:     #F87171;
}

/* ── Kid shell overrides (no red in kid app) ──────────────────────────── */
/* Adult shells (teacher.html, operator.html) use red for destructive;
   kid shell (index.html with data-kid1="true") uses amber-ink. */
body[data-kid1="true"] {
  --destructive: var(--amber-ink);  /* spec alias: 5.9:1 as text on paper, 6.39:1 white-on-fill */
}