/*
 * Design tokens: the one place colours, type, spacing and shape are defined. Every other stylesheet
 * uses these variables and never hard-codes a colour, so the theme can change in one file.
 *
 * Direction: calm "paper and ink". Light by default, an equally finished dark theme, one blue for
 * action, green only for "done", amber only for "partly", red only for errors. No purple, no
 * gradients on controls. Contrast ratios (WCAG 2.x) were checked for every text pairing below; body
 * text is at least 4.5:1 and UI parts at least 3:1.
 *
 * Theme choice: the device setting unless the student picked one (html[data-theme="light|dark"]).
 * The whiteboard lesson keeps its own board colours; the chrome around it stays neutral.
 */
:root {
  color-scheme: light;

  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F1F4F7;          /* inset areas: code, table headers, input backgrounds */
  --sidebar: #EEF1F5;
  --border: #DCE2E9;
  --border-strong: #C3CCD6;
  --track: #E3E8EE;
  --hover: rgba(22, 32, 43, 0.06);
  --scrim: rgba(15, 23, 32, 0.45);

  --text: #16202B;
  --text-muted: #56657A;
  --text-inverse: #FFFFFF;

  --primary: #1F5FA8;
  --primary-hover: #194E8B;
  --primary-soft: #E7F0FA;
  --primary-strong: #1A4F8C;     /* text on --primary-soft */
  --on-primary: #FFFFFF;
  --link: #1F5FA8;
  --focus: #1F5FA8;

  --success: #1B7A4E;
  --success-text: #146642;
  --success-soft: #E6F4EC;
  --warning: #B7791F;
  --warning-text: #7A4F0C;
  --warning-soft: #FCF1DC;
  --danger: #B3362F;
  --danger-text: #9E2F29;
  --danger-soft: #FBEAE8;
  --neutral-ring: #768496;

  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.06);
  --shadow-pop: 0 8px 24px rgb(16 24 40 / 0.14);

  /* Type: Atkinson Hyperlegible Next separates I/l/1 and O/0, which matters for maths and vocabulary. */
  --font: "Atkinson Hyperlegible Next", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-display: 2.25rem;   --lh-display: 2.75rem;   /* 36/44 */
  --fs-h1: 1.75rem;        --lh-h1: 2.25rem;        /* 28/36 */
  --fs-h2: 1.375rem;       --lh-h2: 1.875rem;       /* 22/30 */
  --fs-h3: 1.125rem;       --lh-h3: 1.625rem;       /* 18/26 */
  --fs-body: 1rem;         --lh-body: 1.625rem;     /* 16/26 */
  --fs-reading: 1.0625rem; --lh-reading: 1.75rem;   /* 17/28, chat answers and lesson text */
  --fs-meta: 0.875rem;     --lh-meta: 1.25rem;      /* 14/20 */
  --fs-eyebrow: 0.75rem;   --lh-eyebrow: 1rem;      /* 12/16, uppercase Latin only */

  /* 4px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 64px;
  --content-w: 1120px;       /* lists and grids */
  --reading-w: 760px;        /* forms and reading */
  --gutter: 24px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 150ms;
  --t: 200ms;
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
}

/* Dark theme, from the device setting unless the student chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F1720;
    --surface: #17212C;
    --surface-2: #1C2733;
    --sidebar: #121B25;
    --border: #263342;
    --border-strong: #34455A;
    --track: #2A3847;
    --hover: rgba(230, 237, 243, 0.06);
    --scrim: rgba(0, 0, 0, 0.55);
    --text: #E6EDF3;
    --text-muted: #9AA8B7;
    --text-inverse: #0B1622;
    --primary: #6AA6E8;
    --primary-hover: #86B8EE;
    --primary-soft: #1C3350;
    --primary-strong: #CFE3FA;
    --on-primary: #0B1622;
    --link: #7DB3EE;
    --focus: #7DB3EE;
    --success: #4CC98E;
    --success-text: #6FD6A4;
    --success-soft: #16352A;
    --warning: #E7AE48;
    --warning-text: #F0C274;
    --warning-soft: #3A2E17;
    --danger: #F07C73;
    --danger-text: #F4968F;
    --danger-soft: #3F1F1D;
    --neutral-ring: #5E6D7E;
    --shadow-card: none;
    --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.45);
  }
}

/* The same dark values when the student picked dark explicitly. Keep in sync with the block above. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1720;
  --surface: #17212C;
  --surface-2: #1C2733;
  --sidebar: #121B25;
  --border: #263342;
  --border-strong: #34455A;
  --track: #2A3847;
  --hover: rgba(230, 237, 243, 0.06);
  --scrim: rgba(0, 0, 0, 0.55);
  --text: #E6EDF3;
  --text-muted: #9AA8B7;
  --text-inverse: #0B1622;
  --primary: #6AA6E8;
  --primary-hover: #86B8EE;
  --primary-soft: #1C3350;
  --primary-strong: #CFE3FA;
  --on-primary: #0B1622;
  --link: #7DB3EE;
  --focus: #7DB3EE;
  --success: #4CC98E;
  --success-text: #6FD6A4;
  --success-soft: #16352A;
  --warning: #E7AE48;
  --warning-text: #F0C274;
  --warning-soft: #3A2E17;
  --danger: #F07C73;
  --danger-text: #F4968F;
  --danger-soft: #3F1F1D;
  --neutral-ring: #5E6D7E;
  --shadow-card: none;
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; }
}

/* Fixed paper and board ink for immersive content, independent of the shell theme. */
:root {
  --board-color-1: #121212;
  --board-color-2: rgba(255,255,255,0.08);
  --board-color-3: #9be49b;
  --board-color-4: #f2f2f2;
  --board-color-5: rgba(242,242,242,0.35);
  --board-color-6: #f3e37c;
  --board-color-7: #ff9ecf;
  --board-color-8: rgba(255,158,207,0.7);
  --board-color-9: #7cc7ff;
  --board-color-10: #ff6fd8;
  --board-color-11: #ff6fd8;
  --board-color-12: #aab4c0;
  --board-color-13: #aab4c0;
  --board-color-14: #f3e37c;
  --board-color-15: #ff9ecf;
  --board-color-16: rgba(255,255,255,0.18);
  --test-color-17: #fff;
  --test-color-18: #202124;
  --test-color-19: #202124;
  --test-color-20: #50545b;
  --test-color-21: #fff;
  --test-color-22: #b8bdc5;
  --test-color-23: #f5f6f8;
  --test-color-24: rgba(239, 68, 68, 0.6);
  --test-color-25: rgba(254, 202, 202, 0.98);
  --test-color-26: rgba(255, 255, 255, 0.12);
  --test-color-27: #f59e0b;
  --test-color-28: rgba(255, 255, 255, 0.06);
  --test-color-29: rgba(252, 165, 165, 0.98);
  --test-color-30: #f5f6f8;
  --test-color-31: #fff;
  --test-color-32: rgba(124, 58, 237, 0.55);
  --test-color-33: rgba(124, 58, 237, 0.24);
  --test-color-34: rgba(255, 255, 255, 0.28);
  --test-color-35: #f59e0b;
  --test-color-36: rgba(255, 255, 255, 0.85);
  --test-color-37: rgba(11, 16, 32, 0.97);
  --test-color-38: rgba(34, 197, 94, 0.3);
  --test-color-39: #22c55e;
  --test-color-40: rgba(239, 68, 68, 0.3);
  --test-color-41: #ef4444;
  --test-color-42: rgba(0, 0, 0, 0.18);
  --test-color-43: rgba(124, 58, 237, 0.55);
  --test-color-44: rgba(255, 255, 255, 0.82);
  --test-color-45: rgba(255, 255, 255, 0.08);
  --test-color-46: rgba(124, 58, 237, 0.7);
  --test-color-47: rgba(124, 58, 237, 0.24);
  --test-color-48: rgba(255, 255, 255, 0.06);
  --test-color-49: rgba(239, 68, 68, 0.7);
  --test-color-50: rgba(254, 202, 202, 0.98);
  --test-color-51: rgba(255, 255, 255, 0.05);
  --test-color-52: rgba(255, 255, 255, 0.10);
  --test-color-53: rgba(124, 58, 237, 0.75);
  --test-color-54: rgba(124, 58, 237, 0.25);
  --test-color-55: rgba(11, 16, 32, 0.98);
  --test-color-56: rgba(255, 255, 255, 0.08);
  --test-color-57: #e0245e;
  --test-color-58: #e0245e;
  --test-color-59: #2456bd;
  --test-color-60: rgba(255, 255, 255, 0.05);
  --test-color-61: rgba(124, 58, 237, 0.75);
  --test-color-62: rgba(124, 58, 237, 0.25);
  --test-color-63: rgba(255, 255, 255, 0.05);
  --test-color-64: rgba(255, 255, 255, 0.45);
  --test-color-65: rgba(251, 191, 36, 0.5);
  --test-color-66: rgba(251, 191, 36, 0.35);
  --test-color-67: rgba(11, 16, 32, 0.98);
  --test-color-68: rgba(11, 16, 32, 0.98);
  --test-color-69: rgba(255, 255, 255, 0.06);
  --test-color-70: rgba(3, 6, 18, 0.6);
  --test-color-71: rgba(11, 16, 32, 0.99);
  --test-color-72: #fff;
  --test-color-73: #2456bd;
  --test-color-74: #2456bd;
  --test-color-75: #fff;
  --test-color-76: #b42318;
  --test-color-77: #202124;
  --test-color-78: #fff;
  --test-color-79: #50545b;
  --test-color-80: #fff;
  --test-color-81: #202124;
  --test-color-82: #2456bd;
  --test-color-83: #fff;
  --test-color-84: #f0f3f8;
  --test-color-85: #2456bd;
  --test-color-86: #50545b;
  --test-color-87: #202124;
  --test-color-88: #2456bd;
  --test-color-89: #626773;
  --test-color-90: #fff;
  --test-color-91: #2456bd;
  --test-color-92: #fff;
  --test-color-93: #111;
  --test-color-94: #111;
}