/* Raw palette — literal values, never referenced outside this file */
:root {
  --raw-blue-700: #185FA5;
  --raw-blue-800: #0f4a82;
  /* Deliberately mode-invariant (no dark override) — the dashboard action-card
     and quiz question-badge gradients used this literal in both themes before
     it was tokenised in the 2026-07 UI review; same value on purpose. */
  --raw-blue-vivid: #2272c3;
  --raw-blue-200: #c8dff5;
  --raw-navy-900: #1a1a2e;
  --raw-grey-700: #374151;
  --raw-grey-500: #6b7280;
  --raw-grey-200: #e5e7eb;
  --raw-white: #ffffff;
  --raw-fog-50: #f5f7fb;
  --raw-red-600: #dc2626;
  --raw-red-700: #b91c1c;
  --raw-green-bg: #dcfce7;
  --raw-green-text: #15803d;
  --raw-green-border: #86efac;
  --raw-red-bg: #fee2e2;
  --raw-red-text: #991b1b;
  --raw-red-border: #fca5a5;
  --raw-amber-bg: #fffbeb;
  --raw-amber-text: #92400e;
  --raw-amber-border: #fde68a;
  --raw-coral-600: #d35a3a;
  --raw-coral-100: #fef0ec;
  --raw-gold: #d4a017;
  --raw-silver: #94a3b8;
  --raw-grey-100: #f3f4f6;
  --raw-navy-800: #1e293b;
  --raw-navy-700: #162536;
  --raw-blue-300: #93c5fd;
  --raw-amber-strong: #d97706;
  --raw-green-600: #16a34a;
  --raw-blue-100: #bfdbfe;
  --raw-coral-300: #f08a6f;
}

:root[data-theme="dark"] {
  --raw-blue-400: #5b9fe8;
  --raw-blue-500: #4a96e8;
  --raw-blue-600: #2466b8;
  --raw-blue-650: #3277c8;
  --raw-blue-900: #1a2c42;
  --raw-ink-950: #0f1620;
  --raw-ink-925: #121a28;
  --raw-ink-900: #161f2c;
  --raw-fog-100: #e8ecf2;
  --raw-slate-400: #93a1b5;
  --raw-slate-300: #c2cdda;
  --raw-slate-800: #283448;
  --raw-red-500: #c62828;
  --raw-red-550: #d63333;
  --raw-green-650: #22c55e;
  --raw-blue-850: #2d4d70;
  --raw-green-bg-dark: #123723;
  --raw-green-text-dark: #72ca91;
  --raw-green-border-dark: #1f5c3a;
  --raw-red-bg-dark: #3a1414;
  --raw-red-text-dark: #d68585;
  --raw-red-border-dark: #5c2020;
  --raw-amber-bg-dark: #3a2a0c;
  --raw-amber-text-dark: #ccaa51;
  --raw-amber-strong-dark: #cc9c66;
  --raw-amber-border-dark: #5c4214;
  --raw-coral-dark: #f0805f;
  --raw-coral-300-dark: #f5a584;
  --raw-coral-track-dark: #3a2018;
  --raw-gold-dark: #e8c050;
  --raw-silver-dark: #a8b4c4;
}

/* Semantic roles — components reference only these */
:root {
  --surface: var(--raw-fog-50);
  --surface-raised: var(--raw-white);
  --text: var(--raw-navy-900);
  --text-secondary: var(--raw-grey-700);
  --text-muted: var(--raw-grey-500);
  --text-on-accent: var(--raw-white);
  --border: var(--raw-grey-200);

  --fill-accent: var(--raw-blue-700);
  --fill-accent-hover: var(--raw-blue-800);
  --fill-accent-bright: var(--raw-blue-800);
  --fill-accent-vivid: var(--raw-blue-vivid);
  --text-accent: var(--raw-blue-700);
  --accent-subtle: var(--raw-blue-200);
  --border-accent: var(--raw-blue-100);
  --focus-ring: var(--raw-blue-700);

  --fill-danger: var(--raw-red-600);
  --fill-danger-hover: var(--raw-red-700);
  --fill-success: var(--raw-green-600);

  --bg-success: var(--raw-green-bg);
  --text-success: var(--raw-green-text);
  --border-success: var(--raw-green-border);
  --bg-danger: var(--raw-red-bg);
  --text-danger: var(--raw-red-text);
  --border-danger: var(--raw-red-border);
  --bg-warning: var(--raw-amber-bg);
  --text-warning: var(--raw-amber-text);
  --border-warning: var(--raw-amber-border);

  --gamify-fill: var(--raw-coral-600);
  --gamify-fill-light: var(--raw-coral-300);
  --gamify-track: var(--raw-coral-100);
  --tier-gold: var(--raw-gold);
  --tier-silver: var(--raw-silver);

  --surface-sunken: var(--raw-grey-100);
  --fill-disabled: var(--raw-grey-500);
  /* confirmed: accordion bar matches the plain toast tone (decision A) */
  --surface-inverse: var(--raw-navy-800);
  --surface-inverse-hover: var(--raw-navy-700);
  --text-on-inverse-accent: var(--raw-blue-300);
  --surface-inverse-chip-bg: rgba(147,197,253,0.12);
  --surface-inverse-chip-border: rgba(147,197,253,0.25);
  --status-uploaded: var(--raw-amber-strong);
  --accent-warm: var(--raw-amber-strong);

  /* Card shadow family — the brand-blue-tinted shadow used on every
     surface-raised card/section/modal site-wide. Suppressed (not
     recoloured) in dark mode: see the dark override below. Does NOT cover
     shadows sitting under inherently-blue elements (dashboard action
     cards, the quiz progress-bar fill) — those stay blue-tinted in both
     themes since the element under them is blue in both themes too. */
  --shadow-card: 0 4px 24px rgba(24,95,165,0.25);
  --shadow-card-soft: 0 4px 24px rgba(24,95,165,0.10);
  --shadow-card-hover: 0 6px 28px rgba(24,95,165,0.35);
  --shadow-card-hover-strong: 0 8px 32px rgba(24,95,165,0.4);
  --shadow-card-subtle: 0 2px 12px rgba(24,95,165,0.12);
  --shadow-soft-sm: 0 2px 8px rgba(24,95,165,0.08);
  --shadow-drawer: 4px 0 24px rgba(24,95,165,0.35);
}

:root[data-theme="dark"] {
  --surface: var(--raw-ink-950);
  --surface-raised: var(--raw-ink-900);
  --text: var(--raw-fog-100);
  --text-secondary: var(--raw-slate-300);
  --text-muted: var(--raw-slate-400);
  --text-on-accent: var(--raw-white);
  --border: var(--raw-slate-800);

  --fill-accent: var(--raw-blue-600);
  --fill-accent-hover: var(--raw-blue-650);
  --fill-accent-bright: var(--raw-blue-400);
  --text-accent: var(--raw-blue-500);
  --accent-subtle: var(--raw-blue-900);
  --border-accent: var(--raw-blue-850);
  --focus-ring: var(--raw-blue-500);

  --fill-danger: var(--raw-red-500);
  --fill-danger-hover: var(--raw-red-550);
  --fill-success: var(--raw-green-650);

  --bg-success: var(--raw-green-bg-dark);
  --text-success: var(--raw-green-text-dark);
  --border-success: var(--raw-green-border-dark);
  --bg-danger: var(--raw-red-bg-dark);
  --text-danger: var(--raw-red-text-dark);
  --border-danger: var(--raw-red-border-dark);
  --bg-warning: var(--raw-amber-bg-dark);
  --text-warning: var(--raw-amber-text-dark);
  --border-warning: var(--raw-amber-border-dark);

  --gamify-fill: var(--raw-coral-dark);
  --gamify-fill-light: var(--raw-coral-300-dark);
  --gamify-track: var(--raw-coral-track-dark);
  --tier-gold: var(--raw-gold-dark);
  --tier-silver: var(--raw-silver-dark);

  /* confirmed: sunken sits between page and card, not below page (option B) —
     mirrors light mode's subtlety rather than introducing a third extreme */
  --surface-sunken: var(--raw-ink-925);
  /* confirmed: kept low-contrast on purpose — disabled controls are meant
     to read as washed-out, same accepted pattern as light mode */
  --fill-disabled: var(--raw-slate-400);
  /* confirmed: promoted to the accent fill so it still pops against the
     dark page (decision 2) — white text/chip follow, same reasoning */
  --surface-inverse: var(--fill-accent);
  --surface-inverse-hover: var(--fill-accent-hover);
  --text-on-inverse-accent: var(--raw-white);
  --surface-inverse-chip-bg: rgba(255,255,255,0.15);
  --surface-inverse-chip-border: rgba(255,255,255,0.3);
  --status-uploaded: var(--raw-amber-strong-dark);
  --accent-warm: var(--raw-amber-strong-dark);

  /* Suppressed, not recoloured: neutral black shadows instead of the
     light-mode blue tint, which read as an unintended glow against the
     dark surfaces. */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-card-soft: 0 4px 24px rgba(0,0,0,0.18);
  --shadow-card-hover: 0 6px 28px rgba(0,0,0,0.45);
  --shadow-card-hover-strong: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-card-subtle: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-soft-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-drawer: 4px 0 24px rgba(0,0,0,0.45);
}

/* Global focus-visible ring — the one cross-cutting rule this variables-only
   file carries, so every page gets it just by loading this file. Replaces
   every page's scattered outline:none + border-color-swap focus override. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}