/* Theme variable definitions per ARCHITECTURE.md Section 2, upgraded to the
   system-default lighting engine (2026-07-12).

   The cascade is a three-state contract on the root element:
   - No data-theme attribute: the OS decides. :root declares the light
     palette and the prefers-color-scheme media block below overrides it
     with the dark palette natively, before any JavaScript runs.
   - data-theme="light": the student chose light. The :not() guard keeps
     the media block away, so the :root light palette always wins.
   - data-theme="dark": the student chose dark. The explicit block at the
     bottom applies the dark palette regardless of the OS setting.
   theme.js writes exactly these three states from ode_theme_preference. */

:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --text-secondary: #5a5a6e;
    --panel-bg: #f4f4f4;
    --panel-border: rgba(0, 0, 0, 0.08);
    --accent-color: #6200ee;
    --accent-soft: rgba(98, 0, 238, 0.10);
    /* Purple text token, used for standalone accent TEXT (sidebar links, section
       header labels, badges) as opposed to --accent-color, which also floors the
       solid accent buttons. In light mode it matches --accent-color (#6200ee on
       white already clears WCAG AA at ~8.6:1); dark mode lightens it below. */
    --accent-text: #6200ee;
    --success-color: #1b7a43;
    --error-color: #b3261e;
    --locked-color: #9b9ba8;
    --header-bg: #fafafa;
    --shadow-color: rgba(0, 0, 0, 0.08);
    /* Annotation ink tokens (annotate.js). The default pen is always purple,
       resolved per surface lighting: dark purple on the light whiteboard,
       light lavender on the dark blackboard. --board-bg is the opaque canvas
       behind the dedicated whiteboards (quiz split panel, floating board). */
    --pen-ink: #4c1d95;
    --board-bg: #ffffff;
}

/* System default: with no manual choice stamped on the root element, the
   dark palette follows the operating system natively. The token values are
   identical to the manual dark block below and MUST stay in sync. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-color: #121212;
        --text-color: #e0e0e0;
        --text-secondary: #9aa0b0;
        --panel-bg: #1e1e1e;
        --panel-border: rgba(255, 255, 255, 0.08);
        --accent-color: #bb86fc;
        --accent-soft: rgba(187, 134, 252, 0.12);
        --accent-text: #c5a3ff;
        --success-color: #38c172;
        --error-color: #f2746b;
        --locked-color: #5c5c6a;
        --header-bg: #181818;
        --shadow-color: rgba(0, 0, 0, 0.4);
        --pen-ink: #d8c7ff;
        --board-bg: #17171d;
    }
}

:root[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --text-secondary: #9aa0b0;
    --panel-bg: #1e1e1e;
    --panel-border: rgba(255, 255, 255, 0.08);
    --accent-color: #bb86fc;
    --accent-soft: rgba(187, 134, 252, 0.12);
    /* A lighter pastel violet for raw accent TEXT in dark mode. #c5a3ff lands
       ~8.9:1 against the #121212 surface (and stays above 4.5:1 on --panel-bg and
       the --accent-soft wash), comfortably clearing WCAG AA. --accent-color
       (#bb86fc) stays the button-background floor so dark text on a purple button
       is untouched. */
    --accent-text: #c5a3ff;
    --success-color: #38c172;
    --error-color: #f2746b;
    --locked-color: #5c5c6a;
    --header-bg: #181818;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --pen-ink: #d8c7ff;
    --board-bg: #17171d;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}