/* ------------------------------------------------------------------
   Physics Navigator — design tokens

   Every colour in this app comes from here. A page or a component that
   hard-codes a hex value breaks the light/dark switch silently: it
   looks right in whichever mode it was written in and wrong in the
   other, and nobody notices until a user switches.

   Two surfaces, deliberately different:

   STAFF   light or dark, chosen by the user. Dense, neutral, one
           accent. Someone works in this for hours.
   STUDENT light only. This mirrors the real NTA exam interface, and
           a student who has practised on a dark screen would meet a
           white one on exam day.

   Colour carries meaning and nothing else. Green is correct, red is
   wrong, amber is a warning, purple is marked-for-review. Nothing is
   coloured for decoration.
------------------------------------------------------------------ */

/* ==================================================================
   STAFF — light (default)
   ================================================================== */

:root {
    /* -- surfaces, from furthest back to nearest front -------------- */
    --surface-page: #f6f7f9;
    --surface-raised: #ffffff;
    --surface-sunken: #f0f2f5;
    --surface-overlay: #ffffff;

    /* -- text: four weights, used consistently ---------------------- */
    --text-primary: #16181d;
    /* body, headings */
    --text-secondary: #4b5261;
    /* labels, table headers */
    --text-muted: #737b8c;
    /* hints, meta, placeholders */
    --text-faint: #9aa1b1;
    /* timestamps, disabled */
    --text-on-accent: #ffffff;

    /* -- lines ------------------------------------------------------ */
    --border: #dfe3ea;
    --border-strong: #eef0f4;
    /* table row rules: lighter, not darker */
    --focus-ring: #4338ca;

    /* -- accent -----------------------------------------------------
     One accent, used for the current nav item, primary buttons and
     focus. Change these three lines to reskin the whole staff side. */
    --accent: #4338ca;
    --accent-hover: #3730a3;
    --accent-soft: #eef0fd;

    /* -- state ------------------------------------------------------ */
    --state-success: #1f7a3f;
    --state-success-soft: #e8f3ec;
    --state-danger: #b3382f;
    --state-danger-soft: #fbeceb;
    --state-warning: #9a5f0b;
    --state-warning-soft: #fdf3e3;
    --state-info: #1f5f8b;
    --state-info-soft: #e8f1f8;

    /* -- question types ---------------------------------------------
     Used on the type pill in lists. Muted on purpose: these appear
     hundreds of times down a page and must not shout. */
    --type-single-text: #1f5f8b;
    --type-single-border: #b8d3e6;
    --type-multiple-text: #6b4a8c;
    --type-multiple-border: #d5c6e4;
    --type-numerical-text: #1f7a3f;
    --type-numerical-border: #b9d9c4;
    --type-passage-text: #9a5f0b;
    --type-passage-border: #e8d3ae;

    /* -- shape ------------------------------------------------------ */
    --radius: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* -- spacing scale ---------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 28px;
    --space-7: 40px;

    /* -- shell sizes ------------------------------------------------ */
    --sidebar-w: 236px;
    --sidebar-w-collapsed: 60px;
    --topbar-h: 56px;

    /* -- elevation --------------------------------------------------
     Two only. More than two and nothing reads as more important than
     anything else. */
    --shadow-sm: 0 1px 2px rgba(16, 20, 30, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 20, 30, 0.10);

    /* Behind the mobile drawer. A token because it is a colour, even
     though it is not a hex value — the same rule applies. */
    --overlay-scrim: rgba(16, 20, 30, 0.45);

    /* -- type ------------------------------------------------------- */
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}


/* ==================================================================
   STAFF — dark

   Not the light palette inverted. Surfaces are lifted rather than
   darkened as they come forward, borders are low-contrast, and the
   accent is lightened so it still reads on a dark field.
   ================================================================== */

:root[data-theme="dark"] {
    --surface-page: #14161a;
    --surface-raised: #1c1f25;
    --surface-sunken: #23272f;
    --surface-overlay: #23272f;

    --text-primary: #e7e9ee;
    --text-secondary: #b0b6c2;
    --text-muted: #868d9c;
    --text-faint: #646b79;
    --text-on-accent: #ffffff;

    --border: #2e333c;
    --border-strong: #262b33;
    --focus-ring: #818cf8;

    --accent: #6366f1;
    --accent-hover: #818cf8;
    --accent-soft: #23253a;

    --state-success: #5cbd7d;
    --state-success-soft: #16281d;
    --state-danger: #ec7c72;
    --state-danger-soft: #2a1b1a;
    --state-warning: #d9a441;
    --state-warning-soft: #2a2318;
    --state-info: #6bb2d6;
    --state-info-soft: #17242c;

    --type-single-text: #7ab5d8;
    --type-single-border: #2b4152;
    --type-multiple-text: #b79ad4;
    --type-multiple-border: #3b3049;
    --type-numerical-text: #6fc48c;
    --type-numerical-border: #26402f;
    --type-passage-text: #d9a441;
    --type-passage-border: #453720;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);

    --overlay-scrim: rgba(0, 0, 0, 0.6);
}


/* Follow the operating system when the user has not chosen.
   theme_attr() writes data-theme only for an explicit choice, so this
   block is what "System" means. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface-page: #14161a;
        --surface-raised: #1c1f25;
        --surface-sunken: #23272f;
        --surface-overlay: #23272f;

        --text-primary: #e7e9ee;
        --text-secondary: #b0b6c2;
        --text-muted: #868d9c;
        --text-faint: #646b79;

        --border: #2e333c;
        --border-strong: #262b33;
        --focus-ring: #818cf8;

        --accent: #6366f1;
        --accent-hover: #818cf8;
        --accent-soft: #23253a;

        --state-success: #5cbd7d;
        --state-success-soft: #16281d;
        --state-danger: #ec7c72;
        --state-danger-soft: #2a1b1a;
        --state-warning: #d9a441;
        --state-warning-soft: #2a2318;
        --state-info: #6bb2d6;
        --state-info-soft: #17242c;

        --type-single-text: #7ab5d8;
        --type-single-border: #2b4152;
        --type-multiple-text: #b79ad4;
        --type-multiple-border: #3b3049;
        --type-numerical-text: #6fc48c;
        --type-numerical-border: #26402f;
        --type-passage-text: #d9a441;
        --type-passage-border: #453720;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);

        --overlay-scrim: rgba(0, 0, 0, 0.6);
    }
}


/* ==================================================================
   STUDENT — light only

   Prefixed --s- so a staff token can never be used here by accident,
   and so the student side is unaffected by the theme switch.
   ================================================================== */

:root {
    --s-page: #f3f4f6;
    --s-card: #ffffff;
    --s-sunken: #f8f9fa;
    --s-line: #d6dae0;
    --s-line-soft: #e8eaee;

    --s-ink: #14161a;
    --s-ink-dim: #4d5461;
    --s-ink-faint: #7b8390;

    /* One signal colour: "this is selected". */
    --s-primary: #0f6e8c;
    --s-primary-hover: #0b5a73;
    --s-primary-soft: #e4f1f6;
    --s-on-primary: #ffffff;

    --s-ok: #1f7a3f;
    --s-warn: #9a5f0b;
    --s-danger: #b3382f;

    /* -- CBT question palette ---------------------------------------
     The five states of the real exam interface. A student who has
     practised on these reads the palette without thinking on the day,
     so the meanings are fixed:

       answered            green
       not answered        red      (opened, left blank)
       marked              purple   (flagged for a second look)
       marked + answered   purple, with a green dot
       not visited         plain    (never opened)                  */
    --cbt-answered-bg: #2e8b4f;
    --cbt-answered-text: #ffffff;
    --cbt-not-answered-bg: #c0392b;
    --cbt-not-answered-text: #ffffff;
    --cbt-marked-bg: #6b3fa0;
    --cbt-marked-text: #ffffff;
    --cbt-marked-dot: #4ade80;
    --cbt-not-visited-bg: #ffffff;
    --cbt-not-visited-text: #3b4048;
    --cbt-not-visited-border: #b9bfc8;
    --cbt-current-ring: #0f6e8c;

    /* The exam chrome sits above the paper and stays out of the way. */
    --s-chrome-bg: #ffffff;
    --s-chrome-border: #d6dae0;

    --s-radius: 8px;
    --s-radius-lg: 12px;

    /* Bigger tap targets than the staff side: a student answers on a
     phone, often standing, often in a hurry. */
    --s-tap-min: 46px;
}