/*
 * quiz-theme.css — Canonical design token file
 *
 * ALL color values for the quiz application are defined here.
 * Never hardcode hex colors in HTML or JS — use var(--token-name).
 *
 * Uses light-dark() with color-scheme for automatic theme switching.
 * Blocking <script> in each HTML <head> sets style.colorScheme from
 * localStorage before first paint (FART prevention).
 */

@layer reset, tokens, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

@layer tokens {
  :root {
    color-scheme: dark;

    /* Shell (full-bleed body gradient) - PocketPrep parity: dark navy */
    --shell: light-dark(#1f3545, #1a1a2e);
    --shell-strong: light-dark(#1f3545, #16213e);
    --shell-text: light-dark(#ffffff, #f0f0f0);

    /* Surfaces - PocketPrep parity */
    --panel: light-dark(#f4f5f9, #1e2a3a);
    --panel-soft: light-dark(#eef2f7, #243042);
    --panel-border: light-dark(transparent, rgba(255,255,255,0.12));
    --border: light-dark(#d4dce7, rgba(255,255,255,0.12));

    /* Typography */
    --ink: light-dark(#223446, #e8ecf0);
    --muted: light-dark(#5d6d80, #8899aa);

    /* Accent (Pocket Prep blue — full brand parity) */
    --accent: light-dark(#0064ff, #4a90e2);
    --accent-soft: light-dark(#33495f, #33495f);
    --accent-strong: light-dark(#3380ff, #5a9aff);

    /* Interactive - PocketPrep parity: blue primary */
    --action: light-dark(#0064ff, #4a6a85);

    /* Feedback — PocketPrep exact: teal rgb(4,152,117) + red rgb(229,37,37) */
    --good: light-dark(#049875, #049875);
    --bad: light-dark(#e52525, #e52525);
    --good-bg: light-dark(#ecf8f2, #0a2e22);
    --bad-bg: light-dark(#fdf0f0, #2e1414);
    --pp-neutral: light-dark(#587181, #708e9d);
    --pp-correct-dark: #00664a;
    --pp-blue-action: #0064ff;                 /* PP exact: pre-submit selection blue */

    /* Accent extensions */
    --accent-border: light-dark(#4d8eff, #3a7ad4);
    --accent-deep: light-dark(#004cc2, #2a6abc);
    --accent-ink: light-dark(#003d99, #c0d8f0);
    --accent-wash: light-dark(#e8f1ff, #1a2d4a);
    --accent-text: light-dark(#0054d9, #6aacff);

    /* Unified selected-state tokens (display mode, notes, and active pills) */
    --selected-active-bg: light-dark(#e8f1ff, #2a3d58);
    --selected-active-border: light-dark(#4d8eff, #4f89cf);
    --selected-active-text: light-dark(#0054d9, #b9d5ff);
    --selected-active-ring: light-dark(rgba(77, 142, 255, 0.28), rgba(79, 137, 207, 0.36));

    /* Shell overlays and muted text */
    --shell-surface-06: light-dark(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
    --shell-surface-08: light-dark(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
    --shell-surface-10: light-dark(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10));
    --shell-surface-12: light-dark(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
    --shell-surface-14: light-dark(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14));
    --shell-surface-16: light-dark(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16));
    --shell-surface-25: light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25));
    --shell-text-88: light-dark(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88));
    --shell-text-85: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85));
    --shell-text-82: light-dark(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82));
    --shell-text-78: light-dark(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78));
    --shell-text-72: light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72));

    /* Shadow tokens */
    --shadow-shell-soft: 0 -2px 8px rgba(31, 53, 69, 0.15);
    --shadow-card-strong: 0 18px 38px rgba(8, 16, 25, 0.26);
    --shadow-card-medium: 0 18px 36px rgba(5, 14, 22, 0.24);
    --shadow-option: 0 1px 4px rgba(71, 89, 103, 0.30);

    /* Warm accent used for badges/flags */
    --warm-accent: light-dark(rgb(255, 206, 116), rgb(255, 206, 116));
    --warm-accent-soft: light-dark(rgba(240, 193, 114, 0.12), rgba(240, 193, 114, 0.12));
    --warm-accent-soft-14: light-dark(rgba(240, 193, 114, 0.14), rgba(240, 193, 114, 0.14));
    --warm-accent-border: light-dark(rgba(240, 193, 114, 0.42), rgba(240, 193, 114, 0.42));
    --warm-accent-ring: light-dark(rgba(240, 193, 114, 0.16), rgba(240, 193, 114, 0.16));

    /* Scrollbar */
    --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.15));
    --scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.32), rgba(255, 255, 255, 0.28));
    --scrollbar-track: transparent;

    /* Compatibility aliases for legacy selectors */
    --surface: var(--panel);
    --surface-hover: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
    --correct: var(--good);
    --incorrect: var(--bad);
    --on-accent: var(--shell-text);
    --border-color: var(--border);
    --surface-color: var(--panel);
    --text-color: var(--ink);
    --kbd-bg: var(--panel-soft);
    --overlay-backdrop: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

    /* Borders */
    --border-action: light-dark(#8298b3, #5a7a95);
    --border-hover: light-dark(#b5c3d3, #6a8aaa);
    --selected-border: light-dark(#9bb2cc, #6a8aaa);
    --good-border: light-dark(#86efac, #4ade80);
    --warn-border: light-dark(#fcd34d, #f59e0b);

    /* Answer options */
    --option-bg: light-dark(#ffffff, #1e2d3d);
    --option-border: light-dark(#d6dde8, rgba(255,255,255,0.15));
    --option-selected: light-dark(#eaf1fb, #2a3a4d);
  }

  [data-theme="light"] {
    color-scheme: light;
  }
}
