/* ==========================================================================
   DESIGN TOKENS & THEMING SYSTEM
   Light Mode (Titanium / Alabaster Warm Studio) & Dark Mode (Obsidian Cyber-Glow)
   ========================================================================== */

:root {
  /* Common Brand Accents */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-glow: rgba(37, 99, 235, 0.35);
  
  --color-accent-cyan: #0891b2;
  --color-accent-purple: #7c3aed;
  --color-accent-emerald: #059669;
  --color-accent-amber: #d97706;
  --color-accent-rose: #e11d48;

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

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 450ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   LIGHT MODE: Premium Titanium Alabaster Studio
   Multi-layered rich white tone with warm depth, ambient glows & frosted glass
   ========================================================================== */
[data-theme="light"] {
  --bg-main: #f8f9fc;
  --bg-secondary: #f0f2f7;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.82);
  --bg-elevated: #ffffff;
  --bg-terminal: #0f1422;
  --bg-terminal-header: #0a0d17;
  
  --border-subtle: rgba(15, 23, 42, 0.07);
  --border-medium: rgba(15, 23, 42, 0.12);
  --border-active: rgba(37, 99, 235, 0.5);
  --border-highlight: rgba(255, 255, 255, 0.95);

  --text-primary: #0a0f1d;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  --badge-bg: rgba(37, 99, 235, 0.05);
  --badge-border: rgba(37, 99, 235, 0.12);
  --badge-text: #1e293b;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 24px 50px rgba(15, 23, 42, 0.09), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-glow: 0 0 35px rgba(37, 99, 235, 0.18);

  --spotlight-color: rgba(37, 99, 235, 0.09);
  --canvas-particle: rgba(51, 65, 85, 0.3);
  --canvas-line: rgba(51, 65, 85, 0.07);
  
  --grid-pattern: radial-gradient(rgba(148, 163, 184, 0.28) 1.2px, transparent 1.2px);
  --aura-color-1: rgba(59, 130, 246, 0.08);
  --aura-color-2: rgba(6, 182, 212, 0.06);

  /* Section Background Shades - Titanium Alabaster Palette */
  --shade-hero: transparent;
  --shade-about: linear-gradient(180deg, rgba(243, 245, 250, 0.72) 0%, rgba(238, 242, 249, 0.86) 100%);
  --shade-experience: linear-gradient(180deg, rgba(248, 249, 252, 0.65) 0%, rgba(241, 244, 251, 0.78) 100%);
  --shade-projects: linear-gradient(180deg, rgba(238, 242, 249, 0.8) 0%, rgba(245, 247, 252, 0.88) 100%);
  --shade-certifications: linear-gradient(180deg, rgba(248, 249, 252, 0.7) 0%, rgba(240, 244, 251, 0.82) 100%);
  --shade-skills: linear-gradient(180deg, rgba(242, 245, 251, 0.78) 0%, rgba(247, 249, 253, 0.86) 100%);
  --shade-contact: linear-gradient(180deg, rgba(240, 244, 252, 0.85) 0%, rgba(248, 249, 252, 0.96) 100%);
}

/* ==========================================================================
   DARK MODE: Obsidian Cyber-Glow Aesthetic
   Deep space, dark slate, vibrant neon accents, luminous glass
   ========================================================================== */
[data-theme="dark"] {
  --bg-main: #070a11;
  --bg-secondary: #0c101a;
  --bg-card: rgba(15, 20, 32, 0.78);
  --bg-card-hover: rgba(20, 28, 44, 0.92);
  --bg-glass: rgba(11, 16, 26, 0.82);
  --bg-elevated: #111726;
  --bg-terminal: #070a12;
  --bg-terminal-header: #04060b;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-active: rgba(56, 189, 248, 0.55);
  --border-highlight: rgba(255, 255, 255, 0.2);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #090d16;

  --badge-bg: rgba(255, 255, 255, 0.06);
  --badge-border: rgba(255, 255, 255, 0.12);
  --badge-text: #cbd5e1;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 54px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 40px rgba(6, 182, 212, 0.3);

  --spotlight-color: rgba(56, 189, 248, 0.14);
  --canvas-particle: rgba(148, 163, 184, 0.45);
  --canvas-line: rgba(56, 189, 248, 0.08);
  
  --grid-pattern: radial-gradient(rgba(255, 255, 255, 0.09) 1.2px, transparent 1.2px);
  --aura-color-1: rgba(56, 189, 248, 0.12);
  --aura-color-2: rgba(139, 92, 246, 0.1);

  /* Section Background Shades - Obsidian Cyber Palette */
  --shade-hero: transparent;
  --shade-about: linear-gradient(180deg, rgba(10, 14, 24, 0.78) 0%, rgba(13, 18, 30, 0.88) 100%);
  --shade-experience: linear-gradient(180deg, rgba(7, 10, 17, 0.7) 0%, rgba(11, 16, 27, 0.82) 100%);
  --shade-projects: linear-gradient(180deg, rgba(12, 17, 29, 0.82) 0%, rgba(15, 22, 38, 0.9) 100%);
  --shade-certifications: linear-gradient(180deg, rgba(9, 13, 22, 0.75) 0%, rgba(12, 17, 28, 0.85) 100%);
  --shade-skills: linear-gradient(180deg, rgba(11, 16, 27, 0.8) 0%, rgba(14, 21, 35, 0.88) 100%);
  --shade-contact: linear-gradient(180deg, rgba(13, 19, 32, 0.88) 0%, rgba(7, 10, 17, 0.97) 100%);
}