/* ─── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

/* ─── Light Theme (Default) ──────────────────────────────────── */
:root {
  --bg:               #F8FAFF;
  --bg-2:             #EEF3FB;
  --bg-card:          #FFFFFF;
  --bg-card-2:        #F4F7FF;
  --primary:          #2563EB;
  --primary-2:        #3B82F6;
  --primary-glow:     rgba(37,99,235,.25);
  --blue:             #2563EB;
  --blue-2:           #3B82F6;
  --cyan:             #0891B2;
  --green:            #16A34A;
  --red:              #DC2626;
  --text:             #0F172A;
  --text-2:           #1E293B;
  --text-3:           #475569;
  --text-4:           #94A3B8;
  --border:           rgba(15,23,42,.09);
  --border-2:         rgba(15,23,42,.16);
  --radius:           14px;
  --radius-sm:        8px;
  --shadow:           0 4px 24px rgba(0,0,0,.07);
  --shadow-lg:        0 8px 48px rgba(0,0,0,.11);
  --mono:             'JetBrains Mono', monospace;

  /* Theme-sensitive surfaces */
  --nav-scrolled-bg:  rgba(248,250,255,.94);
  --nav-mobile-bg:    rgba(255,255,255,.97);
  --float-badge-bg:   rgba(255,255,255,.92);
  --float-badge-border: rgba(15,23,42,.14);
  --mock-header-bg:   linear-gradient(135deg, #EEF2FF, #E0E7FF);
  --lang-dropdown-bg: #FFFFFF;
  --lang-btn-bg:      rgba(15,23,42,.06);
  --grid-line:        rgba(15,23,42,.05);
  --scrollbar-thumb:  #CBD5E1;
  --code-bg:          #F1F5FB;
  --code-border:      rgba(37,99,235,.2);
  --code-color:       #2563EB;
  --code-kw:          #7C3AED;
  --code-str:         #16A34A;
}

/* ─── Dark Theme ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:               #07090F;
  --bg-2:             #0D1117;
  --bg-card:          #111827;
  --bg-card-2:        #1a2235;
  --primary:          #3B82F6;
  --primary-2:        #60A5FA;
  --primary-glow:     rgba(59,130,246,.3);
  --blue:             #3B82F6;
  --blue-2:           #60A5FA;
  --cyan:             #06B6D4;
  --green:            #22C55E;
  --red:              #EF4444;
  --text:             #F1F5F9;
  --text-2:           #CBD5E1;
  --text-3:           #94A3B8;
  --text-4:           #64748B;
  --border:           rgba(255,255,255,.07);
  --border-2:         rgba(255,255,255,.14);
  --shadow:           0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:        0 8px 48px rgba(0,0,0,.6);

  --nav-scrolled-bg:  rgba(7,9,15,.85);
  --nav-mobile-bg:    rgba(7,9,15,.97);
  --float-badge-bg:   rgba(17,24,39,.9);
  --float-badge-border: rgba(255,255,255,.14);
  --mock-header-bg:   linear-gradient(135deg, #1e1f2e, #111827);
  --lang-dropdown-bg: #1a2235;
  --lang-btn-bg:      rgba(255,255,255,.05);
  --grid-line:        rgba(255,255,255,.025);
  --scrollbar-thumb:  #2a3550;
  --code-bg:          var(--bg);
  --code-border:      rgba(59,130,246,.2);
  --code-color:       #60A5FA;
  --code-kw:          #C084FC;
  --code-str:         #86EFAC;
}

[data-theme="dark"] .navbar-logo { content: url('../img/logo-white.png'); }