/* MathsPilot kids theme tokens: map learner themes into shared custom properties. Keep this file token-only; component surfaces live in their source CSS. */

:where(body.portal-student [data-learner-theme]) {
  --kids-bg: #f5f2eb;
  --kids-surface: rgba(255, 252, 246, 0.96);
  --kids-surface-strong: #fffdf8;
  --kids-surface-soft: rgba(255, 252, 246, 0.82);
  --kids-ink: #15213a;
  --kids-muted: #647086;
  --kids-line: rgba(52, 66, 96, 0.16);
  --kids-shadow: 0 18px 45px rgba(37, 44, 62, 0.12);
  --kids-shadow-soft: 0 10px 28px rgba(37, 44, 62, 0.08);
  --kids-focus-ring: rgba(80, 110, 235, 0.34);
  --kids-accent: #4f6fe5;
  --kids-accent-strong: #2749be;
  --kids-accent-soft: #eef2ff;
  --kids-accent-tint: rgba(79, 111, 229, 0.14);
  --kids-accent-shadow: rgba(79, 111, 229, 0.22);
  --kids-secondary: #9bb4ff;
  --kids-secondary-soft: rgba(155, 180, 255, 0.18);
  --kids-warm: #f3c35c;
  --kids-warm-soft: rgba(243, 195, 92, 0.18);
  --kids-good: #2b8f72;
  --kids-good-soft: rgba(43, 143, 114, 0.14);
  --kids-danger: #e06167;
  --kids-danger-soft: rgba(224, 97, 103, 0.14);

  --student-theme-primary: var(--kids-accent);
  --student-theme-secondary: var(--kids-secondary);
  --student-theme-strong: var(--kids-accent-strong);
  --student-theme-glow: var(--kids-accent-shadow);
  --student-theme-dark-primary: color-mix(in srgb, var(--kids-accent) 86%, white 14%);
  --student-theme-dark-secondary: color-mix(in srgb, var(--kids-secondary) 82%, white 18%);
  --student-theme-dark-strong: color-mix(in srgb, var(--kids-accent-strong) 78%, white 22%);
  --student-theme-dark-glow: color-mix(in srgb, var(--kids-accent-shadow) 70%, transparent 30%);

  --young-kids-ink: var(--kids-ink);
  --young-kids-muted: var(--kids-muted);
  --young-kids-line: var(--kids-line);
  --young-kids-card: var(--kids-surface-strong);
  --young-kids-blue: var(--kids-accent);
  --young-kids-green: var(--kids-good);
  --young-kids-gold: var(--kids-warm);
  --young-kids-pink: var(--kids-danger);
  --young-kids-soft-blue: var(--kids-accent-soft);
  --young-kids-soft-green: var(--kids-good-soft);
  --young-kids-soft-gold: var(--kids-warm-soft);
  --young-kids-soft-pink: var(--kids-danger-soft);
  --young-kids-focus-ring: var(--kids-focus-ring);
}

:where(body.portal-student [data-learner-theme="flight"]) {
  --kids-accent: #4f6fe5;
  --kids-accent-strong: #2749be;
  --kids-accent-soft: #edf2ff;
  --kids-accent-tint: rgba(79, 111, 229, 0.15);
  --kids-accent-shadow: rgba(79, 111, 229, 0.24);
  --kids-secondary: #9bb4ff;
  --kids-warm: #f4c75e;
  --kids-good: #327f9f;
}

:where(body.portal-student [data-learner-theme="football"]) {
  --kids-accent: #1e7558;
  --kids-accent-strong: #14543f;
  --kids-accent-soft: #eaf7f1;
  --kids-accent-tint: rgba(30, 117, 88, 0.15);
  --kids-accent-shadow: rgba(30, 117, 88, 0.24);
  --kids-secondary: #6ea2e2;
  --kids-warm: #e8b95b;
  --kids-good: #2a8a5c;
}

:where(body.portal-student [data-learner-theme="space"]) {
  --kids-accent: #6f58d9;
  --kids-accent-strong: #4830a7;
  --kids-accent-soft: #f0edff;
  --kids-accent-tint: rgba(111, 88, 217, 0.16);
  --kids-accent-shadow: rgba(111, 88, 217, 0.25);
  --kids-secondary: #82a8ff;
  --kids-warm: #f2bd64;
  --kids-good: #3d8eaa;
}

:where(body.portal-student [data-learner-theme="studio"]) {
  --kids-accent: #d75f94;
  --kids-accent-strong: #a83669;
  --kids-accent-soft: #fff0f6;
  --kids-accent-tint: rgba(215, 95, 148, 0.16);
  --kids-accent-shadow: rgba(215, 95, 148, 0.23);
  --kids-secondary: #8c79e6;
  --kids-warm: #edbd5c;
  --kids-good: #358d83;
}

:where(body.portal-student [data-learner-theme="ocean"]) {
  --kids-accent: #267da3;
  --kids-accent-strong: #185a77;
  --kids-accent-soft: #e9f6fb;
  --kids-accent-tint: rgba(38, 125, 163, 0.16);
  --kids-accent-shadow: rgba(38, 125, 163, 0.24);
  --kids-secondary: #5ab6b0;
  --kids-warm: #efbd5d;
  --kids-good: #2c8d73;
}

:where(body.portal-student [data-learner-theme="rescue"]) {
  --kids-accent: #c74d3d;
  --kids-accent-strong: #923127;
  --kids-accent-soft: #fff0ed;
  --kids-accent-tint: rgba(199, 77, 61, 0.15);
  --kids-accent-shadow: rgba(199, 77, 61, 0.22);
  --kids-secondary: #5273cf;
  --kids-warm: #f0b44d;
  --kids-good: #287b65;
}

html[data-appearance="dark"] :where(body.portal-student [data-learner-theme]) {
  --kids-bg: #0d1424;
  --kids-surface: rgba(20, 29, 50, 0.9);
  --kids-surface-strong: rgba(24, 35, 60, 0.96);
  --kids-surface-soft: rgba(18, 26, 45, 0.72);
  --kids-ink: #f4f7ff;
  --kids-muted: #b5c0d5;
  --kids-line: rgba(190, 205, 235, 0.2);
  --kids-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
  --kids-shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.26);
  --kids-focus-ring: rgba(168, 188, 255, 0.48);
  --kids-accent-soft: color-mix(in srgb, var(--kids-accent) 20%, #121a2d 80%);
  --kids-accent-tint: color-mix(in srgb, var(--kids-accent) 24%, transparent 76%);
  --kids-secondary-soft: color-mix(in srgb, var(--kids-secondary) 20%, #121a2d 80%);
  --kids-warm-soft: color-mix(in srgb, var(--kids-warm) 20%, #121a2d 80%);
  --kids-good-soft: color-mix(in srgb, var(--kids-good) 20%, #121a2d 80%);
  --kids-danger-soft: color-mix(in srgb, var(--kids-danger) 20%, #121a2d 80%);
}

html[data-contrast="high"] :where(body.portal-student [data-learner-theme]) {
  --kids-line: color-mix(in srgb, var(--kids-ink) 56%, transparent 44%);
  --kids-shadow: 0 0 0 2px color-mix(in srgb, var(--kids-ink) 28%, transparent 72%);
  --kids-shadow-soft: 0 0 0 2px color-mix(in srgb, var(--kids-ink) 22%, transparent 78%);
  --kids-focus-ring: color-mix(in srgb, var(--kids-accent) 76%, white 24%);
  --kids-accent-soft: color-mix(in srgb, var(--kids-accent) 22%, var(--kids-surface-strong) 78%);
}

body.portal-student .student-shell[data-learner-theme],
body.portal-student .young-kids-play-shell[data-learner-theme] {
  color: var(--kids-ink);
}

/* Source CSS reads these tokens directly; this file intentionally avoids painting shells, cards, nav, or buttons. */