/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
    --color-accent: #7c3aed;
    --color-accent-light: #a78bfa;
    --color-accent-rgb: 124, 58, 237;
    --color-secondary: #00A6D6;
    --color-text-main: #0C2340;
    --color-text-muted: #5b6472;
    --color-bg-page: #f4f4f8;
    --color-bg-surface: #ffffff;
    --color-border: rgba(12, 35, 64, 0.1);
    --color-shadow-rgb: 12, 35, 64;
    --color-success: #16a34a;
    --color-success-bg: rgba(22, 163, 74, 0.08);
    --color-error: #dc2626;
    --color-error-bg: rgba(220, 38, 38, 0.08);
    /* Dropout Selection's "confirmed dropout" card state (pages/tools_
       dropout_selection.py) — deliberately not reused anywhere else, so
       it's not a general-purpose token the way accent/success/error are. */
    --color-dropout-bg: #111827;
    --color-dropout-text: #f8fafc;
    /* Grade Calculation's results-table row highlighting (see
       render_gc_table). Same success/error hues as above at two strengths:
       "clip" marks a student whose raw value was outside the configured
       range and so forced the group's rescale, "near" the milder "within
       15% of the top/bottom of the scale". The two have to stay clearly
       distinguishable from each other at a glance, hence the wide alpha
       gap rather than two similar tints. */
    --gc-clip-positive-bg: rgba(22, 163, 74, 0.30);
    --gc-clip-negative-bg: rgba(220, 38, 38, 0.28);
    --gc-near-positive-bg: rgba(22, 163, 74, 0.10);
    --gc-near-negative-bg: rgba(220, 38, 38, 0.10);

    --scrollbar-thumb: rgba(12, 35, 64, 0.25);
    --scrollbar-thumb-hover: rgba(12, 35, 64, 0.4);
    --scrollbar-track: transparent;

    --font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
}

/* ── Dark theme ─────────────────────────────────────────────────────── */
/* Applied via a `data-theme="dark"` attribute on <html>, set by the
   navbar's toggle (callbacks/navbar_callbacks.py). Manual toggle only —
   no prefers-color-scheme fallback, since the app defaults to light and
   remembers the user's explicit choice for the session. */
:root[data-theme="dark"] {
    --color-accent: #a78bfa;
    --color-accent-light: #c4b5fd;
    --color-accent-rgb: 167, 139, 250;
    --color-secondary: #38bdf8;
    --color-text-main: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-bg-page: #10131c;
    --color-bg-surface: #1a1f2e;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-shadow-rgb: 0, 0, 0;
    --color-success: #4ade80;
    --color-success-bg: rgba(74, 222, 128, 0.12);
    --color-error: #f87171;
    --color-error-bg: rgba(248, 113, 113, 0.12);
    /* Pure black reads as "the darkest thing on the page" even against an
       already-dark page background — a lighter near-black (like the light
       theme's) would just blend into --color-bg-page/-surface here. */
    --color-dropout-bg: #000000;
    --color-dropout-text: #f8fafc;
    --gc-clip-positive-bg: rgba(74, 222, 128, 0.28);
    --gc-clip-negative-bg: rgba(248, 113, 113, 0.28);
    --gc-near-positive-bg: rgba(74, 222, 128, 0.11);
    --gc-near-negative-bg: rgba(248, 113, 113, 0.11);

    --scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);
    --scrollbar-track: transparent;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-page);
    color: var(--color-text-main);
    font-family: var(--font-family);
}

a {
    color: inherit;
}

/* ── Scrollbars ─────────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

.app-shell {
    padding: 0 !important;
    max-width: none !important;
}

/* ── Shared page shape ─────────────────────────────────────────────── */
.page-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 64px 24px;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

.page-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}