/* ============================================
   THEME SYSTEM — 3 Complete Palettes
   ============================================ */

/* --- DARK THEME (Default) --- */
html[data-theme="dark"] {
  --bg-primary: #08080b;
  --bg-secondary: #0f0f14;
  --bg-elevated: #16161d;
  --bg-card: rgba(22, 22, 29, 0.8);
  --bg-card-hover: rgba(30, 30, 40, 0.9);
  --bg-input: rgba(22, 22, 29, 0.6);

  --text-primary: #e8e6e3;
  --text-secondary: #a09daa;
  --text-muted: #706d7d;
  --text-accent: #64d8ff;

  --accent-1: #64d8ff;
  --accent-2: #a78bfa;
  --accent-glow: rgba(100, 216, 255, 0.15);
  --accent-gradient: linear-gradient(135deg, #64d8ff, #a78bfa);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(100, 216, 255, 0.3);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(100, 216, 255, 0.1);

  --particle-primary: 100, 216, 255;
  --particle-secondary: 167, 139, 250;
  --particle-tertiary: 56, 189, 248;
  --particle-glow: 0.4;
  --particle-bg-alpha: 0.6;

  --nav-bg: rgba(8, 8, 11, 0.85);
  --nav-border: rgba(255, 255, 255, 0.05);

  --btn-primary-bg: #64d8ff;
  --btn-primary-text: #08080b;
  --btn-primary-hover: #8ae3ff;
  --btn-outline-border: rgba(100, 216, 255, 0.4);
  --btn-outline-hover-bg: rgba(100, 216, 255, 0.1);

  --chip-bg: rgba(100, 216, 255, 0.08);
  --chip-border: rgba(100, 216, 255, 0.15);
  --chip-text: #b4e8f7;
  --chip-hover-bg: rgba(100, 216, 255, 0.15);

  --timeline-line: rgba(100, 216, 255, 0.15);
  --timeline-dot: #64d8ff;

  --nda-bg: rgba(250, 176, 5, 0.1);
  --nda-border: rgba(250, 176, 5, 0.3);
  --nda-text: #fbbf24;

  --chat-user-bg: rgba(100, 216, 255, 0.15);
  --chat-ai-bg: rgba(22, 22, 29, 0.9);
  --chat-border: rgba(100, 216, 255, 0.2);

  --scrollbar-track: #0f0f14;
  --scrollbar-thumb: #2a2a35;
}

/* --- LIGHT THEME --- */
html[data-theme="light"] {
  --bg-primary: #fafaf9;
  --bg-secondary: #f1f0ee;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: rgba(255, 255, 255, 1);
  --bg-input: rgba(235, 233, 230, 0.9);

  --text-primary: #1a1a1a;
  --text-secondary: #555350;
  --text-muted: #6d6b62;
  --text-accent: #0c7c9e;

  --accent-1: #0c7c9e;
  --accent-2: #7c3aed;
  --accent-glow: rgba(12, 124, 158, 0.1);
  --accent-gradient: linear-gradient(135deg, #0c7c9e, #7c3aed);

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-card: rgba(0, 0, 0, 0.12);
  --border-accent: rgba(12, 124, 158, 0.3);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 30px rgba(12, 124, 158, 0.08);

  --particle-primary: 12, 100, 140;
  --particle-secondary: 100, 45, 200;
  --particle-tertiary: 6, 150, 180;
  --particle-glow: 0.25;
  --particle-bg-alpha: 0.5;

  --nav-bg: rgba(250, 250, 249, 0.92);
  --nav-border: rgba(0, 0, 0, 0.06);

  --btn-primary-bg: #0c7c9e;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #0e8fb5;
  --btn-outline-border: rgba(12, 124, 158, 0.4);
  --btn-outline-hover-bg: rgba(12, 124, 158, 0.06);

  --chip-bg: rgba(12, 124, 158, 0.06);
  --chip-border: rgba(12, 124, 158, 0.12);
  --chip-text: #0c7c9e;
  --chip-hover-bg: rgba(12, 124, 158, 0.1);

  --timeline-line: rgba(12, 124, 158, 0.15);
  --timeline-dot: #0c7c9e;

  --nda-bg: rgba(217, 119, 6, 0.08);
  --nda-border: rgba(217, 119, 6, 0.25);
  --nda-text: #b45309;

  --chat-user-bg: rgba(12, 124, 158, 0.1);
  --chat-ai-bg: rgba(241, 240, 238, 0.9);
  --chat-border: rgba(12, 124, 158, 0.15);

  --scrollbar-track: #f1f0ee;
  --scrollbar-thumb: #d0cfcc;
}

/* --- COLOR FUSION THEME ("Digital Synesthesia") --- */
html[data-theme="fusion"] {
  --bg-primary: #0d0d12;
  --bg-secondary: #12121a;
  --bg-elevated: #1a1a25;
  --bg-card: rgba(26, 26, 37, 0.75);
  --bg-card-hover: rgba(35, 35, 50, 0.85);
  --bg-input: rgba(26, 26, 37, 0.6);

  --text-primary: #f0eef5;
  --text-secondary: #a09cb0;
  --text-muted: #7a7690;
  --text-accent: #ff6eb4;

  --accent-1: #ff6eb4;
  --accent-2: #00e5ff;
  --accent-glow: rgba(255, 110, 180, 0.12);
  --accent-gradient: linear-gradient(135deg, #ff6eb4, #00e5ff, #ffe066, #a78bfa);

  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-card: rgba(255, 110, 180, 0.1);
  --border-accent: rgba(255, 110, 180, 0.3);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(255, 110, 180, 0.08);
  --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(255, 110, 180, 0.1), 0 0 80px rgba(0, 229, 255, 0.05);

  --particle-primary: 255, 110, 180;
  --particle-secondary: 0, 229, 255;
  --particle-tertiary: 255, 224, 102;
  --particle-glow: 0.5;
  --particle-bg-alpha: 0.7;

  --nav-bg: rgba(13, 13, 18, 0.85);
  --nav-border: rgba(255, 110, 180, 0.08);

  --btn-primary-bg: linear-gradient(135deg, #ff6eb4, #a78bfa);
  --btn-primary-text: #0d0d12;
  --btn-primary-hover: linear-gradient(135deg, #ff8ec6, #b9a0fc);
  --btn-outline-border: rgba(255, 110, 180, 0.4);
  --btn-outline-hover-bg: rgba(255, 110, 180, 0.1);

  --chip-bg: rgba(255, 110, 180, 0.06);
  --chip-border: rgba(255, 110, 180, 0.12);
  --chip-text: #e8a0c8;
  --chip-hover-bg: rgba(255, 110, 180, 0.12);

  --timeline-line: rgba(255, 110, 180, 0.15);
  --timeline-dot: #ff6eb4;

  --nda-bg: rgba(255, 224, 102, 0.08);
  --nda-border: rgba(255, 224, 102, 0.25);
  --nda-text: #ffe066;

  --chat-user-bg: rgba(255, 110, 180, 0.12);
  --chat-ai-bg: rgba(26, 26, 37, 0.9);
  --chat-border: rgba(255, 110, 180, 0.2);

  --scrollbar-track: #12121a;
  --scrollbar-thumb: #2a2a3a;

  /* Fusion-specific: animated gradient bg */
  --fusion-gradient-1: #ff6eb4;
  --fusion-gradient-2: #00e5ff;
  --fusion-gradient-3: #ffe066;
  --fusion-gradient-4: #a78bfa;
}

/* --- THEME TRANSITION --- */
html {
  --transition-theme: 0.4s ease;
}

body,
.nav,
.timeline__card,
.project-card,
.stat-card,
.chip,
.chat,
.contact__card {
  transition:
    background-color var(--transition-theme),
    color var(--transition-theme),
    border-color var(--transition-theme),
    box-shadow var(--transition-theme);
}