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

/* ---- Dark Mode (Default) ---- */
[data-theme="dark"],
:root {
  --bg-primary: linear-gradient(135deg, #0a0a0f 0%, #0d1117 50%, #0a0f1e 100%);
  --bg-body: #0a0a0f;

  --accent-1: #4f8ef7;
  --accent-2: #9b59f5;
  --accent-3: #00d4ff;

  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.09);
  --glass-bg-strong: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.12);

  --text-primary: #f0f4ff;
  --text-muted: rgba(240, 244, 255, 0.55);
  --text-inverse: #0d1117;

  --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 16px 64px rgba(0, 0, 0, 0.6);

  --scrollbar-bg: rgba(255, 255, 255, 0.04);
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);

  color-scheme: dark;
}

/* ---- Light Mode ---- */
[data-theme="light"] {
  --bg-primary: linear-gradient(135deg, #e8edf7 0%, #dce4f5 50%, #e4eaf8 100%);
  --bg-body: #dce4f5;

  --accent-1: #3b7af5;
  --accent-2: #7c3aed;
  --accent-3: #0ea5e9;

  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-bg-hover: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.70);

  --text-primary: #0d1117;
  --text-muted: rgba(13, 17, 23, 0.6);
  --text-inverse: #f0f4ff;

  --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 16px 64px rgba(0, 0, 0, 0.16);

  --scrollbar-bg: rgba(0, 0, 0, 0.04);
  --scrollbar-thumb: rgba(0, 0, 0, 0.2);

  color-scheme: light;
}

/* ---- Light Mode Overrides ---- */
[data-theme="light"] .glass,
[data-theme="light"] .glass-card,
[data-theme="light"] .glass-nav,
[data-theme="light"] .glass-sm,
[data-theme="light"] .glass-lg {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .project-card:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(59, 122, 245, 0.4);
}

[data-theme="light"] .glass-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12),
              0 0 0 1px rgba(59, 122, 245, 0.3);
}

[data-theme="light"] #hero .hero__headline {
  color: var(--text-primary);
}

[data-theme="light"] .orb {
  opacity: 0.2;
}

[data-theme="light"] .glass-nav--scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #mobile-nav {
  background: rgba(220, 228, 245, 0.88);
}

/* ---- Body Background Application ---- */
body {
  background: var(--bg-primary) fixed;
  background-attachment: fixed;
}

/* ---- Transition on theme change ---- */
body,
.glass,
.glass-card,
.glass-nav,
.glass-sm,
.glass-lg,
.glass-tag,
.glass-badge,
.glass-input,
.glass-stat,
.project-card,
.timeline__card,
.testimonial-card,
.counter-card,
.btn--ghost,
.social-icon,
.theme-toggle,
.navbar__links a,
.filter-btn,
h1, h2, h3, h4, h5, h6, p {
  transition: var(--transition-theme);
}

/* ---- Code blocks ---- */
code {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--accent-3);
}