/* ============================================================================
 * InterviewPrep Design Tokens — SINGLE SOURCE OF TRUTH
 *
 * ALL colors and design tokens used across the app MUST be defined here.
 * Component CSS files should ONLY use var(--xxx) — never hardcoded colors.
 * NO other file should define :root variables.
 *
 * Naming convention:
 *   --primary-*   Primary brand color (coral dark / warm terra light)
 *   --bg-*        Backgrounds
 *   --text-*      Text colors
 *   --border-*    Borders
 *   --accent-*    Secondary accent colors
 *   --status-*    Semantic status colors (success, warning, error, info)
 *   --code-*      Code block colors
 *   --chip-*      Badge/chip colors
 *   --shadow-*    Shadows
 *   --surface-*   Surface/overlay backgrounds
 *   --diff-*      Difficulty level colors
 *   --space-*     Spacing scale
 *   --radius-*    Border radius scale
 *   --nav-*       Navigation (defined in global-nav.css)
 * ============================================================================ */

:root,
:root[data-theme='dark'] {
  /* ── Primary Brand Color ─────────────────────────────────────────────────
   * Coral/orange — warm, energetic, motivating for learning.
   * Use for CTAs, active states, key highlights, links.
   * ────────────────────────────────────────────────────────────────────── */
  --primary: #ff8a5b;
  --primary-hover: #ff9e78;
  --primary-active: #e8764d;
  --primary-soft: rgba(255, 138, 91, 0.15);
  --primary-text: #ff8a5b;
  --primary-on: #0f172a; /* text ON primary bg */

  /* Backgrounds */
  --bg: #0b121a;
  --bg-2: #0e1a2b;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-hover: rgba(148, 163, 184, 0.12);
  --bg-accent: rgba(255, 138, 91, 0.1);
  --bg-accent-2: rgba(100, 116, 139, 0.12);
  --bg-radial-2: rgba(100, 116, 139, 0.12);
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #020617;
  --bg-card: rgba(15, 23, 42, 0.7);
  --panel: #121a24;
  --card: #162030;
  --card-inner: rgba(11, 18, 26, 0.6);

  /* Surfaces */
  --surface-muted: rgba(148, 163, 184, 0.08);
  --surface-strong: rgba(15, 23, 42, 0.45);
  --surface-input: rgba(15, 23, 42, 0.85);

  /* Accent (secondary — teal) */
  --accent: #ff8a5b;
  --accent-2: #2dd4bf;
  --accent-3: #38bdf8;
  --accent-strong: rgba(255, 138, 91, 0.6);
  --accent-soft: rgba(255, 138, 91, 0.18);
  --accent-medium: rgba(255, 138, 91, 0.25);
  --accent-faint: rgba(255, 138, 91, 0.08);
  --accent-glow: rgba(255, 138, 91, 0.18);
  --accent-2-faint: rgba(45, 212, 191, 0.05);
  --accent-2-soft: rgba(45, 212, 191, 0.1);
  --accent-dark: #cc6e48;

  /* Text — WCAG AA compliant on dark backgrounds */
  --text: #f1f5f9;
  --text-main: #f1f5f9;
  --text-muted: #a1b0c4;  /* Brightened from #94a3b8 for contrast */
  --text-secondary: #a1b0c4;
  --text-primary: #f1f5f9;
  --text-accent: #cbd5e1;
  --muted: #a1b0c4;

  /* Borders */
  --border: rgba(148, 163, 184, 0.2);
  --border-soft: rgba(148, 163, 184, 0.15);
  --border-color: rgba(148, 163, 184, 0.2);

  /* Buttons */
  --button-bg: rgba(148, 163, 184, 0.1);
  --button-border-hover: rgba(148, 163, 184, 0.5);
  --focus-ring: rgba(255, 138, 91, 0.6);

  /* Status / semantic colors */
  --status-success: #22c55e;
  --status-success-soft: rgba(34, 197, 94, 0.15);
  --status-success-text: #4ade80;
  --status-warning: #f59e0b;
  --status-warning-soft: rgba(245, 158, 11, 0.15);
  --status-warning-text: #fbbf24;
  --status-error: #ef4444;
  --status-error-soft: rgba(239, 68, 68, 0.15);
  --status-error-text: #f87171;
  --status-info: #3b82f6;
  --status-info-soft: rgba(59, 130, 246, 0.15);
  --status-info-text: #93c5fd;
  --good-color: #10b981;
  --bad-color: #ef4444;
  --warn-color: #f59e0b;

  /* Difficulty */
  --diff-beginner: #22c55e;
  --diff-beginner-soft: rgba(34, 197, 94, 0.15);
  --diff-intermediate: #f59e0b;
  --diff-intermediate-soft: rgba(245, 158, 11, 0.15);
  --diff-advanced: #ef4444;
  --diff-advanced-soft: rgba(239, 68, 68, 0.15);

  /* Gamification */
  --xp-purple: #a78bfa;
  --xp-purple-soft: rgba(167, 139, 250, 0.15);
  --streak-amber: #eab308;

  /* Code */
  --code-bg: #1e293b;
  --code-editor-bg: #0d1117;
  --code-text: #e2e8f0;
  --code-border: #334155;

  /* Chips/badges */
  --chip-bg: rgba(15, 23, 42, 0.55);
  --chip-border: rgba(148, 163, 184, 0.3);
  --chip-text: #e2e8f0;
  --badge-bg: #334155;

  /* Tables */
  --table-header-bg: rgba(255, 138, 91, 0.08);
  --table-row-hover: rgba(255, 255, 255, 0.02);

  /* Shadow */
  --shadow: 0 28px 60px rgba(6, 12, 20, 0.45);
  --shadow-sm: 0 4px 12px rgba(6, 12, 20, 0.3);
  --shadow-soft: 0 16px 32px rgba(6, 12, 20, 0.28);

  /* Typography */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Background gradient spots (study site radial gradients) */
  --bg-spot-1: rgba(255, 138, 91, 0.16);
  --bg-spot-2: rgba(45, 212, 191, 0.12);
  --bg-spot-3: rgba(56, 189, 248, 0.08);
  --glow-1: rgba(255, 138, 91, 0.18);
  --glow-2: rgba(45, 212, 191, 0.14);

  /* Status shorthand aliases */
  --success: #22c55e;

  /* ── Spacing Scale ─────────────────────────────────────────────────── */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */

  /* ── Border Radius Scale ───────────────────────────────────────────── */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-full: 9999px;

  /* ── Min Touch Target ──────────────────────────────────────────────── */
  --touch-min: 2.75rem;  /* 44px — WCAG minimum */

  color-scheme: dark;
}

:root[data-theme='light'] {
  /* ── Primary Brand Color ─────────────────────────────────────────────────
   * Warm terracotta — grounded, approachable, high-contrast on white.
   * ────────────────────────────────────────────────────────────────────── */
  --primary: #c0512d;
  --primary-hover: #a8432b;
  --primary-active: #8f3724;
  --primary-soft: rgba(192, 81, 45, 0.1);
  --primary-text: #b34526;
  --primary-on: #ffffff; /* text ON primary bg */

  /* Backgrounds */
  --bg: #f7f1ea;
  --bg-2: #edf2f8;
  --bg-primary: #f8fafc;
  --bg-secondary: #e2e8f0;
  --bg-hover: rgba(148, 163, 184, 0.15);
  --bg-accent: rgba(192, 81, 45, 0.08);
  --bg-accent-2: rgba(14, 165, 233, 0.12);
  --bg-radial-2: rgba(100, 116, 139, 0.06);
  --bg-gradient-start: #f8fafc;
  --bg-gradient-end: #ede4db;
  --bg-card: rgba(255, 255, 255, 0.92);
  --panel: #ffffff;
  --card: #fef7f0;
  --card-inner: rgba(248, 250, 252, 0.9);

  /* Surfaces */
  --surface-muted: rgba(15, 23, 42, 0.04);
  --surface-strong: rgba(15, 23, 42, 0.06);
  --surface-input: #ffffff;

  /* Accent (secondary — teal) */
  --accent: #c0512d;
  --accent-2: #1f9d8a;
  --accent-3: #2563eb;
  --accent-strong: rgba(192, 81, 45, 0.4);
  --accent-soft: rgba(192, 81, 45, 0.1);
  --accent-medium: rgba(192, 81, 45, 0.2);
  --accent-faint: rgba(192, 81, 45, 0.06);
  --accent-glow: rgba(192, 81, 45, 0.18);
  --accent-2-faint: rgba(31, 157, 138, 0.05);
  --accent-2-soft: rgba(31, 157, 138, 0.1);
  --accent-dark: #8f3724;

  /* Text — WCAG AA compliant on light backgrounds */
  --text: #1a2332;
  --text-main: #1a2332;
  --text-muted: #4b5c6e;  /* Darker from #475569 for better contrast */
  --text-secondary: #5a6b7d;
  --text-primary: #1a2332;
  --text-accent: #1e293b;
  --muted: #4b5c6e;

  /* Borders */
  --border: rgba(15, 23, 42, 0.15);
  --border-soft: rgba(15, 23, 42, 0.1);
  --border-color: rgba(15, 23, 42, 0.15);

  /* Buttons */
  --button-bg: rgba(15, 23, 42, 0.04);
  --button-border-hover: rgba(15, 23, 42, 0.2);
  --focus-ring: rgba(192, 81, 45, 0.5);

  /* Status / semantic colors */
  --status-success: #148a3f;
  --status-success-soft: rgba(20, 138, 63, 0.12);
  --status-success-text: #15803d;
  --status-warning: #b45309;
  --status-warning-soft: rgba(180, 83, 9, 0.12);
  --status-warning-text: #b45309;
  --status-error: #dc2626;
  --status-error-soft: rgba(220, 38, 38, 0.12);
  --status-error-text: #b91c1c;
  --status-info: #2563eb;
  --status-info-soft: rgba(37, 99, 235, 0.12);
  --status-info-text: #1d4ed8;
  --good-color: #16a34a;
  --bad-color: #dc2626;
  --warn-color: #d97706;

  /* Difficulty */
  --diff-beginner: #16a34a;
  --diff-beginner-soft: rgba(22, 163, 74, 0.12);
  --diff-intermediate: #d97706;
  --diff-intermediate-soft: rgba(217, 119, 6, 0.12);
  --diff-advanced: #dc2626;
  --diff-advanced-soft: rgba(220, 38, 38, 0.12);

  /* Gamification */
  --xp-purple: #7c3aed;
  --xp-purple-soft: rgba(124, 58, 237, 0.12);
  --streak-amber: #b45309;

  /* Code */
  --code-bg: #f1f5f9;
  --code-editor-bg: #f8fafc;
  --code-text: #1e293b;
  --code-border: #cbd5e1;

  /* Chips/badges */
  --chip-bg: rgba(226, 232, 240, 0.9);
  --chip-border: rgba(148, 163, 184, 0.4);
  --chip-text: #1f2933;
  --badge-bg: #e2e8f0;

  /* Tables */
  --table-header-bg: rgba(192, 81, 45, 0.06);
  --table-row-hover: rgba(15, 23, 42, 0.04);

  /* Shadow */
  --shadow: 0 18px 40px rgba(60, 70, 85, 0.18);
  --shadow-sm: 0 4px 12px rgba(60, 70, 85, 0.1);
  --shadow-soft: 0 14px 28px rgba(60, 70, 85, 0.1);

  /* Typography */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Background gradient spots (study site radial gradients) */
  --bg-spot-1: rgba(192, 81, 45, 0.12);
  --bg-spot-2: rgba(31, 157, 138, 0.1);
  --bg-spot-3: rgba(37, 99, 235, 0.08);
  --glow-1: rgba(192, 81, 45, 0.18);
  --glow-2: rgba(31, 157, 138, 0.14);

  /* Status shorthand aliases */
  --success: #16a34a;

  /* Spacing, radius, touch — same across themes */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --touch-min: 2.75rem;

  color-scheme: light;
}