/* ============================================
   THEME.CSS — Dark/Light Theme Variables
   ============================================ */

/* --- Light Theme (default) --- */
[data-theme="light"] {
  --bg-primary: #f8f9fc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f2f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fc;
  --bg-overlay: rgba(255, 255, 255, 0.85);
  --bg-pattern: rgba(0, 0, 0, 0.02);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #f8f9fa;

  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-secondary: #8b5cf6;
  --accent-soft: rgba(59, 130, 246, 0.08);

  --border-color: #e2e8f0;
  --border-color-hover: #cbd5e1;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 24px rgba(59, 130, 246, 0.15);

  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* --- Dark Theme --- */
[data-theme="dark"] {
  --bg-primary: #070710;
  --bg-secondary: #0c0c18;
  --bg-tertiary: #141425;
  --bg-card: #12122a;
  --bg-card-hover: #1a1a35;
  --bg-overlay: rgba(7, 7, 16, 0.92);
  --bg-pattern: rgba(255, 255, 255, 0.02);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0a0a14;

  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-secondary: #a78bfa;
  --accent-soft: rgba(96, 165, 250, 0.08);

  --border-color: #1e293b;
  --border-color-hover: #334155;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 30px rgba(96, 165, 250, 0.2);

  --nav-bg: rgba(9, 9, 15, 0.92);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* --- Flowing gradient backgrounds across all sections --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(circle at 1px 1px, var(--bg-pattern) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 80% 5%, var(--glow-1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 5% 50%, var(--glow-2) 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 60% 95%, var(--glow-3) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 30% 30%, var(--glow-4) 0%, transparent 50%);
  pointer-events: none;
}

[data-theme="dark"] {
  --glow-1: rgba(96, 165, 250, 0.07);
  --glow-2: rgba(167, 139, 250, 0.06);
  --glow-3: rgba(96, 165, 250, 0.05);
  --glow-4: rgba(139, 92, 246, 0.04);
}

[data-theme="light"] {
  --glow-1: rgba(59, 130, 246, 0.05);
  --glow-2: rgba(139, 92, 246, 0.04);
  --glow-3: rgba(59, 130, 246, 0.03);
  --glow-4: rgba(139, 92, 246, 0.03);
}