:root {
  /* ── Brand colors ────────────────────────────────────────── */
  --primary: #4f46e5;
  --primary-hover: #6366f1;
  --primary-active: #4338ca;

  /* ── Text ────────────────────────────────────────────────── */
  --text-main: #0f172a;
  --text-muted: #64748b;

  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-back: #f1f5f9;

  /* ── Borders ─────────────────────────────────────────────── */
  --border-color: #e2e8f0;
  --border-color-hover: #cbd5e0;

  /* ── Semantic colors ─────────────────────────────────────── */
  --success-bg: #d1fae5;
  --success-text: #065f46;
  --error-bg: #fee2e2;
  --error-text: #991b1b;

  /* ── Global UI ───────────────────────────────────────────── */
  --color-selected-bg: #eff6ff;
  --color-selected-border: #e0e7ff;
  --color-hover-bg: #f1f5f9;
  --color-subtle-bg: #f8fafc;
  --color-scrollbar: #cbd5e0;
  --color-scrollbar-hover: #94a3b8;
  --color-modal-backdrop: rgba(15, 23, 42, 0.65);
  --color-toast-bg: rgba(15, 23, 42, 0.88);
  --color-toast-text: #ffffff;
  --color-toggle-off: #cbd5e0;
  --color-input-bg: #ffffff;
  --color-input-hover: #f1f5f9;
  --color-input-active: #e5eaf0;
  --color-input-disabled: #f8fafc;

  /* ── Shared study controls (all modes) ───────────────────── */
  --color-counter: var(--primary);    /* card counter numbers */
  --color-warning: #f59e0b;           /* timer warning text */
  --color-danger: #ef4444;            /* timer danger text */
  --color-btn-stop: #ef4444;          /* autoplay stop button */
  --color-btn-stop-hover: #b91c1c;
  --color-btn-loop: #10b981;          /* loop active button */
  --color-btn-loop-hover: #059669;

  /* ── Quiz mode ───────────────────────────────────────────── */
  --color-choice-correct-bg: #48bb78;       /* instant feedback correct choice */
  --color-choice-correct-border: #38a169;
  --color-choice-incorrect-bg: #f56565;     /* instant feedback incorrect choice */
  --color-choice-incorrect-border: #e53e3e;
  --color-answer-correct-bg: #efe;          /* review mistakes correct row */
  --color-answer-correct-border: #cfc;
  --color-answer-correct-text: #14532d;
  --color-answer-wrong-bg: #fee;            /* review mistakes wrong row */
  --color-answer-wrong-border: #fcc;
  --color-answer-wrong-text: #7f1d1d;

  /* ── Slideshow mode ──────────────────────────────────────── */
  --color-slideshow-reveal-bg: #48bb78;     /* answer reveal correct choice */
  --color-slideshow-reveal-border: #38a169;

  /* ── Spaced repetition mode ──────────────────────────────── */
  --color-btn-again: #ef4444;               /* Again button */
  --color-btn-again-hover: #dc2626;
  --color-btn-good: #f59e0b;                /* Good button */
  --color-btn-good-hover: #d97706;
  --color-btn-easy: #10b981;                /* Easy button */
  --color-btn-easy-hover: #059669;
  --color-sr-new: #3b82f6;                  /* New cards count */
  --color-sr-learning: #f59e0b;             /* Learning cards count */
  --color-sr-completed: #10b981;            /* Completed cards count */

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;

  /* ── Typography ──────────────────────────────────────────── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2.25rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ── Border radii ────────────────────────────────────────── */
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 0.1s ease-out;
  --transition-base: 0.2s ease-out;
  --transition-slow: 0.3s ease-out;

  /* ── Breakpoints (for reference in JS) ───────────────────── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}


/* ═══════════════════════════════════════════════════════════
   DARK MODE — [data-theme="dark"] on <html>
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Brand ──────────────────────────────────────────────── */
  --primary: #4f46e5;
  --primary-hover: #a5a6fb;
  --primary-active: #6f70f5;

  /* ── Text ──────────────────────────────────────────────── */
  --text-main: #e6e8ee;
  --text-muted: #9aa3b2;
  --text-subtle: #6b7280;
  --text-disabled: #4b5563;

  /* ── Backgrounds ───────────────────────────────────────── */
  --bg-body: #151821;
  --bg-card: #1b1f2a;
  --bg-card-back: #202534;
  --bg-elevated: #242a3a;

  /* ── Borders ───────────────────────────────────────────── */
  --border-color: rgba(255,255,255,0.06);
  --border-color-hover: rgba(255,255,255,0.12);

  /* ── Global UI ─────────────────────────────────────────── */
  --color-selected-bg: rgba(139,140,248,0.12);
  --color-selected-border: rgba(139,140,248,0.35);
  --color-hover-bg: #202534;
  --color-subtle-bg: #171b24;
  --color-scrollbar: #343a4a;
  --color-scrollbar-hover: #4a5164;
  --color-modal-backdrop: rgba(10, 12, 18, 0.75);
  --color-toast-bg: rgba(30, 34, 48, 0.92);
  --color-toast-text: #e6e8ee;
  --color-toggle-off: #343a4a;
  --color-input-bg: #242a3a;
  --color-input-hover: #2a3144;
  --color-input-active: #303850;
  --color-input-disabled: #1e2333;

  /* ── Shared study controls (all modes) ─────────────────── */
  --color-counter: var(--text-main);
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-btn-stop: #8b2525;
  --color-btn-stop-hover: #7a1f1f;
  --color-btn-loop: #1a6b45;
  --color-btn-loop-hover: #155c3a;

  /* ── Quiz mode ─────────────────────────────────────────── */
  --color-choice-correct-bg: #276749;
  --color-choice-correct-border: #2f855a;
  --color-choice-incorrect-bg: #c53030;
  --color-choice-incorrect-border: #9b2c2c;
  --color-answer-correct-bg: #0c2e25;
  --color-answer-correct-border: rgba(52,211,153,0.3);
  --color-answer-correct-text: #6ee7b7;
  --color-answer-wrong-bg: #3a1414;
  --color-answer-wrong-border: rgba(248,113,113,0.3);
  --color-answer-wrong-text: #fca5a5;

  /* ── Slideshow mode ────────────────────────────────────── */
  --color-slideshow-reveal-bg: #276749;
  --color-slideshow-reveal-border: #2f855a;

  /* ── Spaced repetition mode ────────────────────────────── */
  --color-btn-again: #8b2525;
  --color-btn-again-hover: #7a1f1f;
  --color-btn-good: #92600a;
  --color-btn-good-hover: #7a5009;
  --color-btn-easy: #1a6b45;
  --color-btn-easy-hover: #155c3a;
  --color-sr-new: #60a5fa;
  --color-sr-learning: #fbbf24;
  --color-sr-completed: #34d399;

  /* ── Semantic ───────────────────────────────────────────── */
  --success-bg: #0c2e25;
  --success-text: #34d399;
  --error-bg: #3a1414;
  --error-text: #f87171;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 28px rgba(0,0,0,0.5);
  --shadow-xl: 0 32px 64px rgba(0,0,0,0.6);
}