/* Design Tokens — dark-first, construction-grade · Design System 2.0 */
:root {
  /* Backgrounds — warm charcoal layers (deeper base for better card contrast) */
  --bg: #1a1c1e;
  --surface: #242628;
  --surface-2: #2e3133;
  --surface-3: #383b3e;
  --border: #484c50;
  --glass: rgba(36, 38, 40, 0.82);

  /* Text — softer white for eye comfort (still WCAG AAA) */
  --text: #d8dadc;
  --text-secondary: #b0b4b8;
  --text-muted: #9196a1;
  --text-faint: #686d72;

  /* Primary accent: Soft lavender — refined, elegant */
  --accent: #a78bfa;
  --accent-hover: #9b7af8;
  --accent-muted: rgba(167, 139, 250, 0.10);
  --accent-glow: rgba(167, 139, 250, 0.20);

  /* Secondary accent: muted blue */
  --accent-2: #7ba8d4;
  --accent-2-muted: rgba(123, 168, 212, 0.10);
  --accent-2-subtle: rgba(123, 168, 212, 0.05);

  /* Warm surface variants */
  --surface-raised: var(--surface);
  --surface-warm: #211f28;
  --border-warm: rgba(167, 139, 250, 0.14);
  --text-warm: #a8a0b8;
  --border-subtle: rgba(72, 76, 80, 0.35);
  --surface-hover: rgba(255, 255, 255, 0.06);

  /* Semantic — informational, not alarming */
  --success: #4aca8b;
  --success-bg: rgba(74, 202, 139, 0.25);
  --warning: #e09050;
  --warning-bg: rgba(224, 144, 80, 0.25);
  --danger: #e07c7c;
  --danger-hover: #d06a6a;
  --danger-bg: rgba(217, 114, 114, 0.25);

  /* Chart palette — 10 distinct hues, shared across themes */
  --chart-1: #a080ff;  /* lavender */
  --chart-2: #50b8f0;  /* sky blue */
  --chart-3: #3ccdb8;  /* teal */
  --chart-4: #82c840;  /* lime */
  --chart-5: #f0b830;  /* amber */
  --chart-6: #f08850;  /* tangerine */
  --chart-7: #f06898;  /* pink */
  --chart-8: #cc6ce8;  /* fuchsia */
  --chart-9: #5898f0;  /* blue */
  --chart-10: #a8a098; /* stone */

  /* Brand colors */
  --whatsapp: #25d366;
  --whatsapp-muted: rgba(37, 211, 102, 0.10);

  /* Functional — required white for QR code readability */
  --qr-bg: #ffffff;

  /* Overlays */
  --backdrop: rgba(0, 0, 0, 0.4);
  --glass-border: rgba(255, 255, 255, 0.06);

  /* Spacing — generous for readability */
  --space-2xs: 0.125rem;
  --space-xs: 0.375rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3.5rem;
  --space-4xl: 5rem;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;

  --text-2xs: 0.6563rem;
  --text-xs: 0.7188rem;
  --text-sm: 0.7813rem;
  --text-base: 0.8438rem;
  --text-lg: 1.0313rem;
  --text-xl: 1.2188rem;
  --text-2xl: clamp(1.3438rem, 1.075rem + 1.25vw, 1.5938rem);
  --text-3xl: clamp(1.5938rem, 1.325rem + 1.5vw, 2.0625rem);
  --text-4xl: clamp(2.0625rem, 1.55rem + 2vw, 2.6875rem);

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Letter spacing — tighter for headlines, wider for uppercase labels */
  --tracking-tightest: -0.03em;
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.011em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0.01em;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.08em;

  /* Breakpoints (cannot be tokenized in CSS, documented here)
     SM: 640px  — form stacking, compact mobile
     MD: 768px  — tables responsive, general mobile
     LG: 1024px — sidebar toggle, desktop layout
     Also: 480px for 2-col stat grids */

  /* Border radius — sharp geometric aesthetic */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* Shadows — feathered, subtle elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.22), 0 4px 8px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.26), 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 0 1px rgba(167, 139, 250, 0.06);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.28), 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.20), 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-input: inset 0 1px 3px rgba(0, 0, 0, 0.15);

  /* Gradients — micro-sheen for depth */
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
  --gradient-accent-subtle: linear-gradient(135deg, rgba(167, 139, 250, 0.04) 0%, transparent 100%);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Easing — spring-like curves for modern feel */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fab: 110;
  --z-sheet: 150;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* Layout */
  --sidebar-width: 220px;
  --sidebar-collapsed: 72px;
  --nav-height: 64px;
  --mobile-header-h: calc(var(--space-sm) * 2 + 3rem + 1px + env(safe-area-inset-top, 0px));
}

/* ═══════════════════════════════════════
   Light theme overrides
   ═══════════════════════════════════════ */
[data-theme="light"] {
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #e5e7eb;
  --border: #d1d5db;
  --glass: rgba(255, 255, 255, 0.65);

  --text: #1a1a2e;
  --text-secondary: #3d3d5c;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;

  --accent: #8b5cf6;
  --accent-hover: #7c3aed;
  --accent-muted: rgba(139, 92, 246, 0.08);
  --accent-glow: rgba(139, 92, 246, 0.12);

  --accent-2: #3b82f6;
  --accent-2-muted: rgba(59, 130, 246, 0.08);
  --accent-2-subtle: rgba(59, 130, 246, 0.04);

  --surface-raised: var(--surface);
  --surface-warm: #f5f3ff;
  --border-warm: rgba(124, 58, 237, 0.15);
  --text-warm: #6b6280;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --surface-hover: rgba(0, 0, 0, 0.03);
  --backdrop: rgba(0, 0, 0, 0.3);
  --glass-border: rgba(0, 0, 0, 0.06);

  --on-semantic: #ffffff;

  --success: #34c06a;
  --success-bg: rgba(52, 192, 106, 0.12);
  --warning: #e0a030;
  --warning-bg: rgba(224, 160, 48, 0.12);
  --danger: #e06868;
  --danger-hover: #d05454;
  --danger-bg: rgba(224, 104, 104, 0.10);


  /* Shadows: feather-light — let whitespace do the work */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-glow: none;
  --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-inset: none;
  --shadow-input: none;

  --gradient-surface: none;
  --gradient-accent-subtle: none;
}

/* ═══════════════════════════════════════
   Outrun theme overrides — neon construction
   ═══════════════════════════════════════ */
[data-theme="outrun"] {
  /* Backgrounds — rich purple layers */
  --bg: #180e28;
  --surface: #22163a;
  --surface-2: #2c1e4e;
  --surface-3: #382a60;
  --border: #443472;
  --glass: rgba(34, 22, 58, 0.85);

  /* Text — ghost white with lavender tint */
  --text: #e0dff0;
  --text-secondary: #a0a0c8;
  --text-muted: #7070a0;
  --text-faint: #505080;

  /* Primary accent: hot amber */
  --accent: #ffaa00;
  --accent-hover: #ffbb33;
  --accent-muted: rgba(255, 170, 0, 0.10);
  --accent-glow: rgba(255, 170, 0, 0.25);

  /* Secondary accent: hot magenta */
  --accent-2: #ff2a6d;
  --accent-2-muted: rgba(255, 42, 109, 0.10);
  --accent-2-subtle: rgba(255, 42, 109, 0.05);

  /* Warm surface variants — deep purple */
  --surface-raised: var(--surface);
  --surface-warm: #241440;
  --border-warm: rgba(255, 170, 0, 0.14);
  --text-warm: #9080b8;
  --border-subtle: rgba(68, 52, 114, 0.40);
  --surface-hover: rgba(255, 170, 0, 0.06);

  /* Semantic — neon variants */
  --success: #05ffa1;
  --success-bg: rgba(5, 255, 161, 0.20);
  --warning: #ffb833;
  --warning-bg: rgba(255, 184, 51, 0.20);
  --danger: #ff3366;
  --danger-hover: #ff1a53;
  --danger-bg: rgba(255, 51, 102, 0.20);

  /* Chart palette — full neon spectrum */
  --chart-1: #ffaa00;  /* amber */
  --chart-2: #ff2a6d;  /* magenta */
  --chart-3: #05ffa1;  /* mint */
  --chart-4: #00f0ff;  /* cyan */
  --chart-5: #ffb833;  /* amber */
  --chart-6: #ff6b35;  /* orange */
  --chart-7: #ff71ce;  /* pink */
  --chart-8: #b967ff;  /* violet */
  --chart-9: #01cdfe;  /* sky */
  --chart-10: #05ffc8; /* teal */

  /* Overlays */
  --backdrop: rgba(0, 0, 0, 0.5);
  --glass-border: rgba(255, 170, 0, 0.08);

  /* Shadows — purple glow */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 0 6px rgba(255, 170, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.30), 0 0 12px rgba(255, 170, 0, 0.06);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 170, 0, 0.08);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.40), 0 0 30px rgba(255, 170, 0, 0.10);
  --shadow-glow: 0 0 12px rgba(255, 170, 0, 0.15);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.40), 0 0 8px rgba(255, 170, 0, 0.06);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.30), 0 0 20px rgba(255, 170, 0, 0.12);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-input: inset 0 1px 3px rgba(0, 0, 0, 0.20);

  /* Gradients — purple micro-sheen (stronger) */
  --gradient-surface: linear-gradient(135deg, rgba(0, 229, 255, 0.04) 0%, rgba(255, 42, 109, 0.04) 100%);
  --gradient-accent-subtle: linear-gradient(135deg, rgba(0, 229, 255, 0.07) 0%, transparent 100%);
}

/* Outrun uses dark logo variant */
[data-theme="outrun"] .logo--light { display: none; }

/* Theme-aware logo toggle */
.logo--light { display: none; }

[data-theme="light"] .logo--dark { display: none; }
[data-theme="light"] .logo--light { display: inline; }