/* ===== Alon.dev — Design Tokens ===== */

:root {
  /* Backgrounds — Light Mode (default) */
  --bg-dark: #FAFAFE;
  --bg-mid: #F0EDF7;
  --bg-light: #E8E4F0;
  --bg-card: rgba(115, 83, 186, 0.04);
  --bg-card-hover: rgba(115, 83, 186, 0.08);

  /* Accent Colors */
  --accent-blue: #B026FF;
  --accent-purple: #7353BA;
  --accent-cyan: #06B6D4;
  --accent-green: #10B981;
  --accent-orange: #F59E0B;

  /* Gradients */
  --gradient-main: linear-gradient(135deg, #B026FF, #7353BA);
  --gradient-glow: linear-gradient(135deg, #06B6D4, #B026FF);
  --gradient-text: linear-gradient(135deg, #B026FF, #7353BA);
  --gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(176,38,255,0.08) 0%, transparent 60%);

  /* Text */
  --text-primary: #1A0E3C;
  --text-secondary: #4B4068;
  --text-muted: #7B7394;

  /* Borders */
  --border-subtle: rgba(115, 83, 186, 0.1);
  --border-accent: rgba(176, 38, 255, 0.3);

  /* Fonts */
  --font-heading: 'Poppins', 'Heebo', sans-serif;
  --font-body: 'Heebo', 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --section-py: 100px;
  --container-max: 1200px;
  --container-px: 24px;
  --nav-height: 72px;

  /* Effects */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --shadow: 0 8px 32px rgba(115, 83, 186, 0.08);
  --shadow-glow: 0 0 40px rgba(115, 83, 186, 0.08);
  --shadow-card: 0 4px 24px rgba(115, 83, 186, 0.06);
  --transition: 0.3s ease;
  --backdrop: blur(12px);

  /* Light mode helper vars */
  --nav-bg-scrolled: rgba(255, 255, 255, 0.9);
  --mobile-menu-bg: rgba(255, 255, 255, 0.97);
  --hero-grid-color: rgba(115, 83, 186, 0.06);
  --hero-code-color: rgba(0, 0, 0, 0.4);
  --overlay-bg: rgba(255, 255, 255, 0.8);
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
  --bg-dark: #1A0E3C;
  --bg-mid: #0A0A1F;
  --bg-light: #1F2937;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);

  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(176, 38, 255, 0.3);

  --gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(176,38,255,0.15) 0%, transparent 60%);

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 40px rgba(176, 38, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.2);

  --nav-bg-scrolled: rgba(26, 14, 60, 0.85);
  --mobile-menu-bg: rgba(26, 14, 60, 0.97);
  --hero-grid-color: rgba(176, 38, 255, 0.03);
  --hero-code-color: rgba(255, 255, 255, 0.3);
  --overlay-bg: rgba(26, 14, 60, 0.7);
}

/* RTL Hebrew override */
[dir="rtl"] {
  --font-heading: 'Heebo', 'Poppins', sans-serif;
  --font-body: 'Heebo', 'Poppins', sans-serif;
}

/* LTR English override */
[dir="ltr"] {
  --font-heading: 'Poppins', 'Heebo', sans-serif;
  --font-body: 'Poppins', 'Heebo', sans-serif;
}