:root {
  color-scheme: light;

  /* Core color system */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #eef2f7;
  --surface-strong: #e4eaf1;
  --text: #17202a;
  --muted: #5b6877;
  --faint: #7a8796;
  --line: #d8e0e9;
  --line-strong: #b9c5d2;
  --accent: #146fd1;
  --accent-hover: #0f5eaf;
  --accent-soft: #e6f1ff;
  --success: #1f7a45;
  --success-soft: #e8f6ee;
  --warning: #8b6200;
  --warning-soft: #fff4d6;
  --danger: #c43b45;
  --danger-soft: #fdecef;

  /* Material system
   * Glass is reserved for navigation / orientation / primary continuation UI.
   * Reading and answer surfaces remain opaque.
   */
  --canvas-ambient-a: rgba(20, 111, 209, 0.13);
  --canvas-ambient-b: rgba(119, 85, 255, 0.10);
  --canvas-ambient-c: rgba(78, 198, 190, 0.08);
  --glass-fill: rgba(255, 255, 255, 0.58);
  --glass-fill-strong: rgba(255, 255, 255, 0.76);
  --glass-fill-soft: rgba(255, 255, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-border-muted: rgba(126, 145, 168, 0.28);
  --glass-highlight: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 18px 55px rgba(45, 68, 96, 0.12), 0 2px 10px rgba(45, 68, 96, 0.06);
  --glass-shadow-compact: 0 12px 34px rgba(45, 68, 96, 0.12);
  --glass-blur: 24px;
  --glass-blur-compact: 18px;
  --glass-saturation: 150%;
  --solid-shadow: 0 1px 2px rgba(20, 30, 40, 0.04), 0 10px 28px rgba(20, 30, 40, 0.055);

  /* Geometry */
  --utility-height: 64px;
  --sidebar-width: 276px;
  --home-max: 1120px;
  --dashboard-max: 980px;
  --lesson-max: 940px;
  --exam-max: 980px;
  --reading-measure: 68ch;
  --page-gutter: 32px;
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 11px;
  --radius-sm: 9px;
  --control-height: 44px;
  --shadow-sm: var(--solid-shadow);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d131b;
  --surface: #171f2a;
  --surface-soft: #1e2834;
  --surface-strong: #283542;
  --text: #f4f7fa;
  --muted: #b8c3cf;
  --faint: #91a0af;
  --line: #303c4a;
  --line-strong: #48596b;
  --accent: #77b8ff;
  --accent-hover: #a2ceff;
  --accent-soft: #173754;
  --success: #68cf91;
  --success-soft: #183629;
  --warning: #e7bd62;
  --warning-soft: #352b18;
  --danger: #ff8b92;
  --danger-soft: #3b2025;
  --canvas-ambient-a: rgba(50, 129, 255, 0.19);
  --canvas-ambient-b: rgba(138, 93, 255, 0.15);
  --canvas-ambient-c: rgba(38, 193, 178, 0.10);
  --glass-fill: rgba(20, 28, 38, 0.58);
  --glass-fill-strong: rgba(20, 28, 38, 0.76);
  --glass-fill-soft: rgba(25, 35, 47, 0.46);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-border-muted: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.32), 0 2px 12px rgba(0, 0, 0, 0.20);
  --glass-shadow-compact: 0 14px 38px rgba(0, 0, 0, 0.28);
  --solid-shadow: 0 12px 34px rgba(0, 0, 0, 0.20);
  --shadow-sm: var(--solid-shadow);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #0d131b;
    --surface: #171f2a;
    --surface-soft: #1e2834;
    --surface-strong: #283542;
    --text: #f4f7fa;
    --muted: #b8c3cf;
    --faint: #91a0af;
    --line: #303c4a;
    --line-strong: #48596b;
    --accent: #77b8ff;
    --accent-hover: #a2ceff;
    --accent-soft: #173754;
    --success: #68cf91;
    --success-soft: #183629;
    --warning: #e7bd62;
    --warning-soft: #352b18;
    --danger: #ff8b92;
    --danger-soft: #3b2025;
    --canvas-ambient-a: rgba(50, 129, 255, 0.19);
    --canvas-ambient-b: rgba(138, 93, 255, 0.15);
    --canvas-ambient-c: rgba(38, 193, 178, 0.10);
    --glass-fill: rgba(20, 28, 38, 0.58);
    --glass-fill-strong: rgba(20, 28, 38, 0.76);
    --glass-fill-soft: rgba(25, 35, 47, 0.46);
    --glass-border: rgba(255, 255, 255, 0.13);
    --glass-border-muted: rgba(255, 255, 255, 0.09);
    --glass-highlight: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.32), 0 2px 12px rgba(0, 0, 0, 0.20);
    --glass-shadow-compact: 0 14px 38px rgba(0, 0, 0, 0.28);
    --solid-shadow: 0 12px 34px rgba(0, 0, 0, 0.20);
    --shadow-sm: var(--solid-shadow);
  }
}

/* Honor the OS accessibility preference where supported. The UI remains
 * fully usable without transparency or backdrop blur.
 */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-fill: var(--surface);
    --glass-fill-strong: var(--surface);
    --glass-fill-soft: var(--surface-soft);
    --glass-border: var(--line);
    --glass-border-muted: var(--line);
    --glass-highlight: transparent;
    --glass-shadow: var(--solid-shadow);
    --glass-shadow-compact: var(--solid-shadow);
    --glass-blur: 0px;
    --glass-blur-compact: 0px;
    --glass-saturation: 100%;
  }
}