/* StudentAI design tokens: the only source of visual-system decisions. */
:root {
    color-scheme: light;

    --bg: #e9edf2;
    --surface: #ffffff;
    --surface-secondary: #f3f5f7;
    --surface-tertiary: #fafbfc;
    --surface-hover: #eef2f7;
    --text-primary: #1f2937;
    --text-secondary: #5b6b7c;
    --text-tertiary: #94a3b8;
    --primary: #205c4d;
    --primary-hover: #174638;
    --primary-soft: #edf4ef;
    --success: #16a34a;
    --success-soft: #f0fdf4;
    --warning: #b7791f;
    --warning-soft: #fff7df;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --info: #0284c7;
    --info-soft: #f0f9ff;
    --divider: #cbd3dc;
    --divider-subtle: #edf1f6;
    --overlay: rgba(15, 23, 42, .46);

    /* Compatibility names used by the existing pages. */
    --page: var(--bg);
    --surface-soft: var(--surface-secondary);
    --surface-muted: var(--surface-tertiary);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --border: var(--divider);
    --border-strong: #cbd5e1;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-soft: var(--primary-soft);
    --on-accent: #ffffff;
    --input-bg: var(--surface);
    --table-header: #f8fafc;
    --color-blue-900: var(--text-primary);
    --color-blue-800: #1e293b;
    --color-teal-700: var(--primary);
    --color-teal-600: var(--primary-hover);
    --color-teal-100: var(--primary-soft);
    --color-teal-050: #f5f3ff;
    --color-neutral-950: var(--text-primary);
    --color-neutral-700: #475569;
    --color-neutral-500: var(--text-secondary);
    --color-neutral-300: #cbd5e1;
    --color-neutral-200: var(--divider);
    --color-neutral-100: var(--surface-secondary);
    --color-neutral-050: var(--surface-tertiary);
    --color-white: #ffffff;

    --sidebar: #19243b;
    --sidebar-soft: #2d4055;
    --sidebar-text: #e8eef5;
    --sidebar-muted: #aebdcb;
    --sidebar-border: #3b5066;
    --sidebar-hover: #30465d;
    --sidebar-active: #34366a;
    --sidebar-active-border: #a5b4fc;
    --sidebar-brand-text: #ffffff;

    --focus: rgba(79, 70, 229, .20);
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, .16);
    --card-shadow: 0 1px 2px rgba(15, 23, 42, .035);
    --popup-shadow: var(--shadow-lg);
    --button-shadow: none;
    --button-hover-shadow: var(--shadow-xs);
    --sidebar-shadow: none;

    --font-display: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    --font-sans: "Segoe UI", Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-title: 30px;
    --line-height: 1.5;

    --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;

    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 2px;
    --radius-pill: 999px;

    --button-height: 38px;
    --button-height-sm: 34px;
    --control-height: 40px;
    --control-height-sm: 34px;
    --table-header-height: 42px;
    --table-row-height: 52px;
    --sidebar-width: 248px;
    --sidebar-collapsed-width: 72px;
    --sidebar-current-width: var(--sidebar-width);
    --content-max-width: 1540px;
    --content-padding-x: 32px;
    --content-padding-y: 32px;
    --topbar-height: 64px;

    --chart-primary: var(--primary);
    --chart-success: var(--success);
    --chart-warning: var(--warning);
    --chart-danger: var(--danger);
    --chart-line: var(--chart-primary);
    --chart-grid: var(--divider-subtle);
    --chart-text: var(--text-secondary);
    --tooltip-bg: #0f172a;
    --tooltip-text: #ffffff;
    --tooltip-border: #334155;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1120;
    --surface: #111827;
    --surface-secondary: #182235;
    --surface-tertiary: #0f172a;
    --surface-hover: #202b3d;
    --text-primary: #f8fafc;
    --text-secondary: #a8b3c4;
    --text-tertiary: #718096;
    --primary: #818cf8;
    --primary-hover: #a5b4fc;
    --primary-soft: #23264d;
    --success: #4ade80;
    --success-soft: #102d20;
    --warning: #fbbf24;
    --warning-soft: #332710;
    --danger: #f87171;
    --danger-soft: #361a20;
    --info: #38bdf8;
    --info-soft: #102a3a;
    --divider: #253147;
    --divider-subtle: #1d293b;
    --border-strong: #3b4a63;
    --on-accent: #11143b;
    --input-bg: #111827;
    --table-header: #151f31;
    --color-blue-900: var(--text-primary);
    --color-blue-800: #e2e8f0;
    --color-neutral-700: #cbd5e1;
    --color-neutral-300: #475569;
    --color-white: #ffffff;
    --sidebar: #0f172a;
    --sidebar-soft: #182235;
    --sidebar-text: #dbe3ef;
    --sidebar-muted: #7f8da3;
    --sidebar-border: #253147;
    --sidebar-hover: #1d293b;
    --sidebar-active: #23264d;
    --sidebar-brand-text: #f8fafc;
    --focus: rgba(129, 140, 248, .28);
    --overlay: rgba(2, 6, 23, .72);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .22);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .20);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .42);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    --tooltip-bg: #f8fafc;
    --tooltip-text: #0f172a;
    --tooltip-border: #cbd5e1;
}

/* Explicit theme surfaces used by every page. */
:root[data-theme="light"] {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-secondary: #edf2f7;
    --surface-tertiary: #f8fafc;
    --text-primary: #1e293b;
    --text-secondary: #526477;
    --divider: #d5dde6;
}
:root[data-theme="dark"] {
    --bg: #111827;
    --surface: #1b2636;
    --surface-secondary: #243247;
    --surface-tertiary: #162131;
    --surface-hover: #2b3b51;
    --text-primary: #f1f5f9;
    --text-secondary: #b8c4d2;
    --divider: #34445a;
    --divider-subtle: #29384b;
    --input-bg: #172334;
}