/* ============================================================
   Luxora Portfolio — CSS Variables & Theme System
   Dark/Light Theme Toggle with CSS Custom Properties
   ============================================================ */

/* ─── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Dark Theme (Default) ────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-primary:       #0A0F1E;
  --bg-secondary:     #0D1526;
  --bg-tertiary:      #111827;
  --bg-card:          rgba(255, 255, 255, 0.04);
  --bg-card-hover:    rgba(255, 255, 255, 0.07);
  --bg-glass:         rgba(255, 255, 255, 0.05);
  --bg-glass-border:  rgba(255, 255, 255, 0.10);
  --bg-overlay:       rgba(10, 15, 30, 0.85);

  /* Text */
  --text-primary:     #F1F5F9;
  --text-secondary:   #94A3B8;
  --text-muted:       #64748B;
  --text-accent:      #6C63FF;

  /* Accent / Brand */
  --accent-primary:   #6C63FF;
  --accent-secondary: #a855f7;
  --accent-tertiary:  #38bdf8;
  --accent-success:   #10b981;
  --accent-warning:   #f59e0b;
  --accent-danger:    #ef4444;

  /* Gradients */
  --gradient-hero:    linear-gradient(135deg, #6C63FF 0%, #a855f7 50%, #38bdf8 100%);
  --gradient-card:    linear-gradient(135deg, rgba(108,99,255,0.15), rgba(168,85,247,0.05));
  --gradient-text:    linear-gradient(135deg, #6C63FF, #a855f7);
  --gradient-cta:     linear-gradient(135deg, #6C63FF, #a855f7);
  --gradient-green:   linear-gradient(135deg, #10b981, #059669);
  --gradient-blue:    linear-gradient(135deg, #38bdf8, #0ea5e9);

  /* Borders */
  --border-color:     rgba(255, 255, 255, 0.08);
  --border-accent:    rgba(108, 99, 255, 0.40);
  --border-hover:     rgba(108, 99, 255, 0.70);

  /* Shadows */
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:        0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:        0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow:      0 0 30px rgba(108,99,255,0.25);
  --shadow-glow-lg:   0 0 60px rgba(108,99,255,0.35);

  /* Blur */
  --blur-sm:          blur(8px);
  --blur-md:          blur(16px);
  --blur-lg:          blur(24px);

  /* Typography */
  --font-sans:        'Inter', system-ui, sans-serif;
  --font-display:     'Syne', 'Inter', sans-serif;
  --font-mono:        'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         16px;
  --space-lg:         24px;
  --space-xl:         48px;
  --space-2xl:        80px;
  --space-3xl:        120px;

  /* Border Radius */
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-xl:        30px;
  --radius-full:      9999px;

  /* Transitions */
  --transition-fast:  0.15s ease;
  --transition-base:  0.30s ease;
  --transition-slow:  0.60s ease;
  --transition-theme: 0.30s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          300;
  --z-modal:          400;
  --z-tooltip:        500;
  --z-overlay:        600;

  /* Navbar */
  --navbar-height:    72px;
  --navbar-bg:        rgba(10, 15, 30, 0.80);

  /* Particles */
  --particle-color:   #6C63FF;
}

/* ─── Light Theme ─────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary:       #F8FAFC;
  --bg-secondary:     #F1F5F9;
  --bg-tertiary:      #E2E8F0;
  --bg-card:          rgba(0, 0, 0, 0.04);
  --bg-card-hover:    rgba(0, 0, 0, 0.07);
  --bg-glass:         rgba(255, 255, 255, 0.70);
  --bg-glass-border:  rgba(0, 0, 0, 0.10);
  --bg-overlay:       rgba(248, 250, 252, 0.90);

  /* Text */
  --text-primary:     #0A0F1E;
  --text-secondary:   #475569;
  --text-muted:       #94A3B8;
  --text-accent:      #5B52E0;

  /* Accent */
  --accent-primary:   #5B52E0;
  --accent-secondary: #9333ea;
  --accent-tertiary:  #0ea5e9;

  /* Borders */
  --border-color:     rgba(0, 0, 0, 0.08);
  --border-accent:    rgba(91, 82, 224, 0.35);
  --border-hover:     rgba(91, 82, 224, 0.60);

  /* Shadows */
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:        0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:        0 20px 60px rgba(0,0,0,0.15);
  --shadow-glow:      0 0 30px rgba(91,82,224,0.20);
  --shadow-glow-lg:   0 0 60px rgba(91,82,224,0.30);

  /* Navbar */
  --navbar-bg:        rgba(248, 250, 252, 0.90);

  /* Particles */
  --particle-color:   #5B52E0;
}

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb        { background: var(--accent-primary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover  { background: var(--accent-secondary); }

/* ─── Selection ───────────────────────────────────────────── */
::selection { background: rgba(108,99,255,0.35); color: var(--text-primary); }