/* The child's panel: one token layer for every child page and all three themes.
   Tiers: primitives (scale values) -> semantic roles (what a colour is FOR) -> legacy aliases that base.html still reads.
   A theme only re-points semantic roles; components in kid.css read roles, never raw values.
   Light is the base; dark comes from prefers-color-scheme. */

:root {
  /* type: Major Third from a 17px body (a 6th grader reads on a phone) */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: var(--font-body);
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 1.875rem;   /* 30 */
  --fs-display: 3.75rem; /* 60: the one number that leads */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --track-caps: 0.06em;
  --display-case: none;

  /* space: 4px rhythm */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --gutter: var(--sp-4);
  --page-max: 680px;

  /* size */
  --tap: 48px;          /* every touch target */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;
  --unit-icon: 44px;
  --hair: 1px;
  --ring-w: 3px;

  /* radius language: set per theme */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;

  /* motion */
  --dur-fast: 100ms; --dur-base: 200ms; --dur-moderate: 300ms; --dur-slow: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --press-scale: 0.97;

  /* depth */
  --shadow-raised: 0 1px 2px rgb(20 20 30 / 0.06), 0 6px 18px rgb(20 20 30 / 0.06);
  --glow: none;
  --blur-glass: 0px;

  /* ---------- semantic roles: Домашка (classic), light ---------- */
  --surface-page: #f5f4f0;
  --surface-card: #fdfcf9;
  --surface-sunken: #ecebe5;
  --surface-hero: #fdfcf9;
  --surface-scrim: rgb(8 8 12 / 0.98);
  --text-primary: #1b1d24;
  --text-secondary: #555a69;
  --text-on-action: #fdfcf9;
  --border-subtle: #e2e1da;
  --border-strong: #8a8d98;
  --action-primary: #4338ca;
  --action-primary-hover: #3730a3;
  --action-primary-active: #312e81;
  --action-secondary-text: #4338ca;
  --text-link: #4338ca;
  --lamp: #15803d;          /* the "done" light: success in every theme */
  --lamp-soft: #dcfce7;
  --idle: #9a9da8;          /* an unlit unit */
  --track: #e2e1da;         /* empty progress */
  --fb-error: #b91c1c;     --fb-error-bg: #fdecec;
  --fb-warning: #a34a06;   --fb-warning-bg: #fdf0e3;
  --fb-info: #1d4ed8;      --fb-info-bg: #e8eefc;
  --fb-help: #8a5a00;      --fb-help-bg: #fbf1d9;
  --focus-ring: #4338ca;
  --hero-art: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: #121318;
    --surface-card: #1b1d24;
    --surface-sunken: #15161c;
    --surface-hero: #1b1d24;
    --text-primary: #ecedf3;
    --text-secondary: #a3a7b8;
    --text-on-action: #14132b;
    --border-subtle: #2c2f3a;
    --border-strong: #6b7083;
    --action-primary: #a5a0ff;
    --action-primary-hover: #bbb7ff;
    --action-primary-active: #8f89f5;
    --action-secondary-text: #b3aeff;
    --text-link: #b3aeff;
    --lamp: #4ade80;
    --lamp-soft: #12301f;
    --idle: #5d6273;
    --track: #2c2f3a;
    --fb-error: #fb8b8b;     --fb-error-bg: #341a1d;
    --fb-warning: #fbb26a;   --fb-warning-bg: #33241a;
    --fb-info: #9cc0ff;      --fb-info-bg: #1a2338;
    --fb-help: #f2c75c;      --fb-help-bg: #302814;
    --focus-ring: #b3aeff;
    --shadow-raised: none;
  }
}

/* ---------- Испытание: night fog, generators, a gate ---------- */
body.trial {
  --font-display: "Oswald", "Arial Narrow", var(--font-body);
  --display-case: uppercase;
  --r-sm: 3px; --r-md: 6px; --r-lg: 8px;
  --surface-page: #efeae3;
  --surface-card: #f9f6f1;
  --surface-sunken: #e6e0d7;
  --surface-hero: #241417;
  --text-primary: #1d1517;
  --text-secondary: #5a4d52;
  --text-on-action: #fbf7f2;
  --border-subtle: #ddd4ca;
  --border-strong: #84757a;
  --action-primary: #a8131b;
  --action-primary-hover: #8c0f16;
  --action-primary-active: #730c12;
  --action-secondary-text: #7a4800;
  --text-link: #7a4800;
  --lamp: #8a5a00;
  --lamp-soft: #f6e6c2;
  --idle: #a1959a;
  --track: #ddd4ca;
  --fb-error: #b3141d;  --fb-error-bg: #f8e3e2;
  --fb-help: #7a5200;   --fb-help-bg: #f4e9cf;
  --focus-ring: #7a4800;
  --hero-art: radial-gradient(120% 90% at 100% 0%, #5a1a1f 0%, transparent 60%);
  --hero-text: #f4ece4; --hero-muted: #c8b9b4; --hero-lamp: #f5c25b; --hero-track: #4a3237;
}
@media (prefers-color-scheme: dark) {
  body.trial {
    --surface-page: #0c0a0d;
    --surface-card: #17131a;
    --surface-sunken: #100d12;
    --surface-hero: #1d1013;
    --text-primary: #efe8e1;
    --text-secondary: #aca2a8;
    --text-on-action: #fbf7f2;
    --border-subtle: #2e252c;
    --border-strong: #6c5e66;
    --action-primary: #c8161e;
    --action-primary-hover: #dc2028;
    --action-primary-active: #a51118;
    --action-secondary-text: #f2c27a;
    --text-link: #f2c27a;
    --lamp: #f5c25b;
    --lamp-soft: #2f2410;
    --idle: #574b53;
    --track: #2a2228;
    --fb-error: #ff7a7e;  --fb-error-bg: #2e1316;
    --fb-warning: #ffa25e; --fb-warning-bg: #2e1d12;
    --fb-info: #a9c6db;   --fb-info-bg: #18202a;
    --fb-help: #e9bb5e;   --fb-help-bg: #2a2112;
    --focus-ring: #f2c27a;
    --glow: 0 0 18px rgb(245 194 91 / 0.35);
    --blur-glass: 3px;
    --shadow-raised: none;
    --hero-text: #f4ece4; --hero-muted: #b8a9a6; --hero-lamp: #f5c25b; --hero-track: #3c272b;
  }
}

/* ---------- Миссия: a rocket assembled module by module ---------- */
body.space {
  --font-display: "Oswald", "Arial Narrow", var(--font-body);
  --display-case: uppercase;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
  --surface-page: #edf1fa;
  --surface-card: #f8faff;
  --surface-sunken: #e2e8f5;
  --surface-hero: #0d1638;
  --text-primary: #0e1530;
  --text-secondary: #4a5675;
  --text-on-action: #f8faff;
  --border-subtle: #d6ddee;
  --border-strong: #707ea3;
  --action-primary: #5a32e0;
  --action-primary-hover: #4a24c4;
  --action-primary-active: #3d1ca6;
  --action-secondary-text: #5a32e0;
  --text-link: #5a32e0;
  --lamp: #04708f;
  --lamp-soft: #d4f1f9;
  --idle: #98a3be;
  --track: #d6ddee;
  --fb-error: #b8174f;  --fb-error-bg: #fbe4ec;
  --fb-info: #3b46c4;   --fb-info-bg: #e5e8fb;
  --focus-ring: #5a32e0;
  --hero-art: radial-gradient(110% 90% at 100% 0%, #3a2a8f 0%, transparent 62%);
  --hero-text: #eef4ff; --hero-muted: #a9b8dc; --hero-lamp: #6fe3ff; --hero-track: #26346a;
}
@media (prefers-color-scheme: dark) {
  body.space {
    --surface-page: #070b1c;
    --surface-card: #10173a;
    --surface-sunken: #0b1130;
    --surface-hero: #121b47;
    --text-primary: #e8f0ff;
    --text-secondary: #a0aed0;
    --text-on-action: #f8faff;
    --border-subtle: #212e5a;
    --border-strong: #56679b;
    --action-primary: #6a45f5;
    --action-primary-hover: #7d5cff;
    --action-primary-active: #5634d6;
    --action-secondary-text: #8ee9ff;
    --text-link: #8ee9ff;
    --lamp: #6fe3ff;
    --lamp-soft: #0f2c40;
    --idle: #3f4f7e;
    --track: #1b2750;
    --fb-error: #ff7aa1;  --fb-error-bg: #2c1230;
    --fb-warning: #ffb866; --fb-warning-bg: #2d2116;
    --fb-info: #b3bdff;   --fb-info-bg: #1a1f4a;
    --fb-help: #ffd479;   --fb-help-bg: #2b2716;
    --focus-ring: #8ee9ff;
    --glow: 0 0 20px rgb(111 227 255 / 0.32);
    --blur-glass: 4px;
    --shadow-raised: none;
    --hero-text: #eef4ff; --hero-muted: #a9b8dc; --hero-lamp: #6fe3ff; --hero-track: #26346a;
  }
}

/* Domashka's hero stays on the card colours (no night scene to set). */
body.classic {
  --hero-text: var(--text-primary); --hero-muted: var(--text-secondary);
  --hero-lamp: var(--lamp); --hero-track: var(--track);
}

/* ---------- legacy aliases: base.html's own rules (cards, picker, viewer) read these ---------- */
:root, body.trial, body.space, body.classic {
  --bg: var(--surface-page);
  --card: var(--surface-card);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --accent: var(--action-primary);
  --green: var(--lamp);
  --red: var(--fb-error);
  --orange: var(--fb-warning);
  --yellow: var(--fb-help);
  --blue: var(--fb-info);
}