/* ==========================================================================
   DESIGN TOKENS - Miracles2Motion (M2M)
   High-performance engineering aesthetic with Obsidian Luxe & Technical Alabaster
   ========================================================================== */

:root {
  /* Default: Obsidian Luxe (Dark Theme) */
  --bg-base: #06070a;
  --bg-surface: #0d0f15;
  --bg-elevated: #131722;
  --bg-card: rgba(16, 20, 30, 0.78);
  --bg-glass: rgba(12, 16, 24, 0.72);
  
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-hover: rgba(255, 255, 255, 0.3);
  --border-accent: rgba(255, 56, 92, 0.45);

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #8494A7;
  --text-inverse: #090A0F;

  /* Engineering Accents */
  --accent-coral: #FF385C;
  --accent-coral-glow: rgba(255, 56, 92, 0.35);
  --accent-cyan: #00F0FF;
  --accent-cyan-glow: rgba(0, 240, 255, 0.3);
  --accent-emerald: #00E676;
  --accent-emerald-glow: rgba(0, 230, 118, 0.25);
  --accent-amber: #FFB020;
  --accent-purple: #8B5CF6;
  --accent-purple-glow: rgba(139, 92, 246, 0.25);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing & Layout */
  --container-max: 1200px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 0 30px rgba(255, 56, 92, 0.25);

  /* Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s var(--ease-smooth);
  --transition-medium: 0.3s var(--ease-spring);
  --transition-slow: 0.6s var(--ease-spring);
}

/* Light Theme: Technical Alabaster */
[data-theme="light"] {
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.85);

  --border-subtle: rgba(15, 23, 42, 0.1);
  --border-medium: rgba(15, 23, 42, 0.16);
  --border-hover: rgba(15, 23, 42, 0.32);
  --border-accent: rgba(225, 29, 72, 0.5);

  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-inverse: #F8FAFC;

  --accent-coral: #E11D48;
  --accent-coral-glow: rgba(225, 29, 72, 0.2);
  --accent-cyan: #0284C7;
  --accent-cyan-glow: rgba(2, 132, 199, 0.2);
  --accent-emerald: #047857;
  --accent-emerald-glow: rgba(4, 120, 87, 0.2);
  --accent-amber: #D97706;
  --accent-purple: #7C3AED;
  --accent-purple-glow: rgba(124, 58, 237, 0.2);

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 16px 40px -8px rgba(15, 23, 42, 0.14);
  --shadow-glow: 0 0 24px rgba(225, 29, 72, 0.18);
}