:root {
  /* Color Palette - Dark Theme (Default) */
  --bg-primary: #0a0d14;
  --bg-secondary: #101624;
  --bg-card: rgba(18, 24, 38, 0.75);
  --bg-card-hover: rgba(26, 35, 56, 0.85);
  --bg-card-solid: #131a2b;
  --bg-glass: rgba(16, 22, 36, 0.65);
  --bg-glass-nav: rgba(10, 13, 20, 0.82);
  --bg-subtle: rgba(255, 255, 255, 0.04);
  --bg-code: #0b101b;

  /* Accent Colors */
  --accent-primary: #6366f1;       /* Indigo */
  --accent-primary-hover: #4f46e5;
  --accent-secondary: #06b6d4;     /* Cyan */
  --accent-tertiary: #10b981;      /* Emerald */
  --accent-purple: #8b5cf6;        /* Violet */
  --accent-amber: #f59e0b;         /* Amber */
  --accent-rose: #f43f5e;          /* Rose (Laravel Red tone) */
  --laravel-red: #ff2d20;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-laravel: linear-gradient(135deg, #ff2d20 0%, #f43f5e 100%);
  --gradient-vue: linear-gradient(135deg, #42b883 0%, #35495e 100%);
  --gradient-aws: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
  --gradient-hero-glow: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15), transparent 70%);
  --gradient-card-border: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));

  /* Text Colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;
  --text-accent: #818cf8;

  /* Borders & Shadows */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-focus: rgba(99, 102, 241, 0.6);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 25px rgba(99, 102, 241, 0.25);
  --shadow-glow-emerald: 0 0 20px rgba(16, 185, 129, 0.25);

  /* Typography - Resume Friendly Fonts */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  /* Transitions & Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --max-width: 1240px;
  --header-height: 72px;
}

/* Light Theme Variables */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --bg-card-solid: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.8);
  --bg-glass-nav: rgba(248, 250, 252, 0.9);
  --bg-subtle: rgba(15, 23, 42, 0.04);
  --bg-code: #0f172a;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #f8fafc;
  --text-accent: #4f46e5;

  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.15);
  --border-focus: rgba(79, 70, 229, 0.6);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px -8px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 25px rgba(99, 102, 241, 0.15);
  --gradient-card-border: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.02));
  --gradient-hero-glow: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.08), transparent 70%);
}