/* ==========================================================================
   QBANK LENS / RUFAIDI Q BANK — UNIFIED DESIGN TOKENS v4.1
   Includes 100% of legacy app.css/onboarding.css/study-player variables
   PLUS v4.0 clinical SaaS surface, typography, and source-authority tokens.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Typography */
  --font-serif: "Newsreader", "Source Serif 4", "Charter", "Iowan Old Style", Georgia, "IBM Plex Sans Arabic", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Plus Jakarta Sans", "Segoe UI", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Core Surfaces (Cool Clinical Alabaster & Crisp White Cards) */
  --bg: #F8FAFC;
  --bg-subtle: #F1F5F9;
  --bg-sidebar: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #F1F5F9;
  --surface-4: #E2E8F0;
  --glass-bg: rgba(255, 255, 255, 0.90);
  --glass-border: rgba(15, 23, 42, 0.08);

  /* v4.0 Surface Aliases */
  --bg-canvas: var(--bg);
  --bg-surface: var(--surface);
  --bg-muted: var(--surface-4);
  --bg-elevated: var(--surface);
  --bg-glass: var(--glass-bg);
  --bg-backdrop: rgba(15, 23, 42, 0.55);

  /* Ink Hierarchy (WCAG AA+) */
  --text: #0F172A;
  --text-2: #334155;
  --text-3: #64748B;
  --inverse: #0F172A;
  --inverse-text: #F8FAFC;

  --ink-1: var(--text);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --ink-4: #94A3B8;
  --ink-on-accent: #FFFFFF;

  /* Borders */
  --border: rgba(15, 23, 42, 0.09);
  --border-2: rgba(15, 23, 42, 0.17);
  --border-subtle: #E2E8F0;
  --border-default: #CBD5E1;
  --border-strong: #94A3B8;

  /* Brand Accent: Clinical Teal */
  --accent: #0F766E;
  --accent-2: #115E59;
  --accent-text: #0F766E;
  --accent-hover: #115E59;
  --accent-active: #134E4A;
  --accent-on: #FFFFFF;
  --accent-soft: rgba(15, 118, 110, 0.10);
  --accent-soft-2: rgba(15, 118, 110, 0.16);
  --accent-line: rgba(15, 118, 110, 0.28);
  --accent-border: rgba(15, 118, 110, 0.30);
  --accent-ring: rgba(15, 118, 110, 0.22);

  /* Academic Indigo (Layered AI / Reasoning) */
  --indigo: #4338CA;
  --indigo-soft: #EEF2FF;
  --indigo-border: #C7D2FE;

  /* Semantic Status Colors */
  --success: #15803D;
  --success-text: #14532D;
  --success-soft: rgba(21, 128, 61, 0.10);
  --success-line: rgba(21, 128, 61, 0.30);
  --success-border: rgba(21, 128, 61, 0.32);

  --danger: #DC2626;
  --danger-text: #B91C1C;
  --danger-soft: rgba(220, 38, 38, 0.10);
  --danger-line: rgba(220, 38, 38, 0.30);
  --danger-border: rgba(220, 38, 38, 0.30);

  --warn: #D97706;
  --warn-text: #92400E;
  --warn-soft: rgba(217, 119, 6, 0.11);
  --warn-line: rgba(217, 119, 6, 0.30);
  --warn-border: rgba(217, 119, 6, 0.30);

  /* Source Authority Badges */
  --source-gameboy-bg: #ECFDF5;
  --source-gameboy-ink: #065F46;
  --source-gameboy-border: #A7F3D0;

  --source-medguard-bg: #EFF6FF;
  --source-medguard-ink: #1E40AF;
  --source-medguard-border: #BFDBFE;

  --source-recall-bg: #F1F5F9;
  --source-recall-ink: #475569;
  --source-recall-border: #CBD5E1;

  /* Specialty Color System */
  --sp-medicine: #2563EB;
  --sp-medicine-soft: rgba(37, 99, 235, 0.10);
  --sp-surgery: #DC2626;
  --sp-surgery-soft: rgba(220, 38, 38, 0.10);
  --sp-pediatrics: #D97706;
  --sp-pediatrics-soft: rgba(217, 119, 6, 0.11);
  --sp-obgyn: #DB2777;
  --sp-obgyn-soft: rgba(219, 39, 119, 0.10);
  --sp-psychiatry: #7C3AED;
  --sp-psychiatry-soft: rgba(124, 58, 237, 0.10);
  --sp-emergency: #EA580C;
  --sp-emergency-soft: rgba(234, 88, 12, 0.10);
  --sp-ethics: #475569;
  --sp-ethics-soft: rgba(71, 85, 105, 0.11);

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 26px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 22px 48px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 28px 64px rgba(15, 23, 42, 0.22);
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.24);

  /* Radii & Shell Dimensions */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 9999px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --rail-w: 72px;
  --rail-expanded-w: 248px;
  --sidebar-w: 248px;
  --sidebar-width: 248px;
  --sidebar-rail: 72px;
  --content-max: 1240px;
  --text-stem: 16.5px;
  --leading-relaxed: 1.68;
  --measure-stem: 70ch;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur: 220ms;
  --dur-slow: 320ms;

  /* Legacy Aliases */
  --bg2: var(--bg-subtle);
  --card: var(--surface);
  --ink: var(--text);
  --muted: var(--text-2);
  --line: var(--border);
  --green: var(--accent);
  --green2: var(--accent-2);
  --mint: var(--accent-soft);
  --amber: var(--warn);
  --red: var(--danger);

  /* Extended Study Player & Knowledge Tokens */
  --ai: oklch(54% .2 292);
  --ai-line: oklch(86% .07 295);
  --ai-soft: oklch(96.4% .025 295);
  --ai-text: oklch(47% .19 292);
  --as-muted: var(--text-2);
  --control-h: 38px;
  --control-h-sm: 32px;
  --hot: oklch(64% .18 45);
  --hot-line: oklch(86% .08 55);
  --hot-soft: oklch(96.6% .03 55);
  --hot-text: oklch(53% .16 45);
  --info: oklch(56% .14 252);
  --info-line: oklch(86% .05 252);
  --info-soft: oklch(96.4% .02 252);
  --info-text: oklch(46.5% .13 252);
  --lb-blank: var(--border);
  --lb-cite: var(--info-text);
  --lb-cite-bg: var(--info-soft);
  --lb-cite-line: var(--info-line);
  --lb-focus: var(--pink);
  --lb-focus-bg: var(--pink-soft);
  --lb-gen: var(--warning-text);
  --lb-gen-bg: var(--warning-soft);
  --lb-hot: var(--hot-text);
  --lb-hot-bg: var(--hot-soft);
  --lb-hot-line: var(--hot-line);
  --lb-row-hover: var(--surface-2);
  --lb-sum: var(--accent-soft);
  --lb-sum-line: var(--accent-line);
  --mark: oklch(93% .12 100);
  --mark-strong: oklch(88% .16 95);
  --mark-text: oklch(25% .04 90);
  --paper: var(--bg);
  --pink: oklch(56% .19 0);
  --pink-soft: oklch(96.5% .02 0);
  --scrim: rgba(15, 23, 42, 0.48);
  --shadow: var(--shadow-xs);
  --st-bar: oklch(23.5% .02 180);
  --st-bar-ink: oklch(96.5% .008 170);
  --st-dis: var(--warning-text);
  --st-dis-bg: var(--warning-soft);
  --st-hl: oklch(92% .15 102);
  --st-no: var(--danger-text);
  --st-no-bg: var(--danger-soft);
  --st-ok: var(--success-text);
  --st-ok-bg: var(--success-soft);
  --st-sel: var(--info-soft);
  --st-sel-line: var(--info);
  --text-md: 15px;
  --vr-soft: var(--surface-2);
  --warning: oklch(74% .15 70);
  --warning-line: oklch(86% .08 80);
  --warning-soft: oklch(96.8% .036 85);
  --warning-text: oklch(49% .105 62);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0F141C;
  --bg-subtle: #151C28;
  --bg-sidebar: #131A24;
  --surface: #18212F;
  --surface-2: #1E293B;
  --surface-3: #263349;
  --surface-4: #334155;
  --glass-bg: rgba(24, 33, 47, 0.90);
  --glass-border: rgba(255, 255, 255, 0.09);

  --bg-canvas: var(--bg);
  --bg-surface: var(--surface);
  --bg-muted: var(--surface-3);
  --bg-elevated: var(--surface-2);
  --bg-glass: var(--glass-bg);
  --bg-backdrop: rgba(2, 6, 23, 0.72);

  --text: #F1F5F9;
  --text-2: #CBD5E1;
  --text-3: #94A3B8;
  --inverse: #F1F5F9;
  --inverse-text: #0F141C;

  --ink-1: var(--text);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --ink-4: #64748B;
  --ink-on-accent: #042F2E;

  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.18);
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.26);

  --accent: #14B897;
  --accent-2: #0E7C66;
  --accent-text: #34D399;
  --accent-hover: #2DD4BF;
  --accent-active: #14B8A6;
  --accent-on: #042F2E;
  --accent-soft: rgba(20, 184, 151, 0.14);
  --accent-soft-2: rgba(20, 184, 151, 0.22);
  --accent-line: rgba(20, 184, 151, 0.34);
  --accent-border: rgba(20, 184, 151, 0.35);
  --accent-ring: rgba(20, 184, 151, 0.25);

  --indigo: #818CF8;
  --indigo-soft: rgba(129, 140, 248, 0.14);
  --indigo-border: rgba(129, 140, 248, 0.32);

  --success: #22C55E;
  --success-text: #86EFAC;
  --success-soft: rgba(34, 197, 94, 0.14);
  --success-line: rgba(34, 197, 94, 0.32);
  --success-border: rgba(34, 197, 94, 0.34);

  --danger: #EF4444;
  --danger-text: #FCA5A5;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --danger-line: rgba(239, 68, 68, 0.35);
  --danger-border: rgba(239, 68, 68, 0.35);

  --warn: #F59E0B;
  --warn-text: #FCD34D;
  --warn-soft: rgba(245, 158, 11, 0.14);
  --warn-line: rgba(245, 158, 11, 0.32);
  --warn-border: rgba(245, 158, 11, 0.32);

  --source-gameboy-bg: rgba(16, 185, 129, 0.16);
  --source-gameboy-ink: #6EE7B7;
  --source-gameboy-border: rgba(16, 185, 129, 0.38);

  --source-medguard-bg: rgba(59, 130, 246, 0.16);
  --source-medguard-ink: #93C5FD;
  --source-medguard-border: rgba(59, 130, 246, 0.38);

  --source-recall-bg: #1E293B;
  --source-recall-ink: #CBD5E1;
  --source-recall-border: #334155;

  --sp-medicine: #60A5FA;
  --sp-medicine-soft: rgba(96, 165, 250, 0.15);
  --sp-surgery: #F87171;
  --sp-surgery-soft: rgba(248, 113, 113, 0.15);
  --sp-pediatrics: #FBBF24;
  --sp-pediatrics-soft: rgba(251, 191, 36, 0.15);
  --sp-obgyn: #F472B6;
  --sp-obgyn-soft: rgba(244, 114, 182, 0.15);
  --sp-psychiatry: #A78BFA;
  --sp-psychiatry-soft: rgba(167, 139, 250, 0.15);
  --sp-emergency: #FB923C;
  --sp-emergency-soft: rgba(251, 146, 60, 0.15);
  --sp-ethics: #94A3B8;
  --sp-ethics-soft: rgba(148, 163, 184, 0.15);

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 26px 56px rgba(0, 0, 0, 0.70);
  --shadow-xl: 0 36px 80px rgba(0, 0, 0, 0.80);
  --focus-ring: 0 0 0 3px rgba(20, 184, 151, 0.32);

  --ai: oklch(72% .15 292);
  --ai-line: oklch(42% .1 292);
  --ai-soft: oklch(27% .05 292);
  --ai-text: oklch(80% .12 292);
  --hot: oklch(74% .15 50);
  --hot-line: oklch(44% .09 50);
  --hot-soft: oklch(28% .05 50);
  --hot-text: oklch(80% .13 55);
  --info: oklch(72% .12 252);
  --info-line: oklch(42% .08 255);
  --info-soft: oklch(27% .04 255);
  --info-text: oklch(80% .1 252);
  --mark: oklch(46% .09 95);
  --mark-strong: oklch(52% .11 95);
  --mark-text: oklch(97% .03 95);
  --pink: oklch(75% .14 0);
  --pink-soft: oklch(27% .05 0);
  --scrim: rgba(2, 6, 23, 0.70);
  --st-bar: oklch(13.5% .007 175);
  --st-bar-ink: oklch(95% .006 175);
  --st-hl: oklch(50% .1 98);
  --warning: oklch(80% .14 75);
  --warning-line: oklch(45% .08 75);
  --warning-soft: oklch(28% .045 75);
  --warning-text: oklch(84% .12 80);
}

/* Exam Tracks */
:root[data-track="nursing"] {
  --accent: #1F5FAE; --accent-2: #184C8C; --accent-text: #1A4D8C; --accent-hover: #184C8C; --accent-on: #FFFFFF;
  --accent-soft: rgba(31, 95, 174, 0.10); --accent-line: rgba(31, 95, 174, 0.30);
  --focus-ring: 0 0 0 3px rgba(31, 95, 174, 0.26);
}
:root[data-track="dentistry"] {
  --accent: #6B46A8; --accent-2: #563887; --accent-text: #56388A; --accent-hover: #563887; --accent-on: #FFFFFF;
  --accent-soft: rgba(107, 70, 168, 0.10); --accent-line: rgba(107, 70, 168, 0.30);
  --focus-ring: 0 0 0 3px rgba(107, 70, 168, 0.26);
}
:root[data-theme="dark"][data-track="nursing"] {
  --accent: #6EA6F0; --accent-2: #3F7FD6; --accent-text: #9CC3F6; --accent-hover: #8AB6F3; --accent-on: #0F1A2B;
  --accent-soft: rgba(110, 166, 240, 0.14); --accent-line: rgba(110, 166, 240, 0.34);
  --focus-ring: 0 0 0 3px rgba(110, 166, 240, 0.32);
}
:root[data-theme="dark"][data-track="dentistry"] {
  --accent: #B293E6; --accent-2: #8E6BCB; --accent-text: #CDB8F0; --accent-hover: #C2A8EC; --accent-on: #1C1429;
  --accent-soft: rgba(178, 147, 230, 0.14); --accent-line: rgba(178, 147, 230, 0.34);
  --focus-ring: 0 0 0 3px rgba(178, 147, 230, 0.32);
}