/* ═══ THEME VARIABLES ═══════════════════════════════════════════════════════ */

/* CYBER — default green */
:root, [data-theme="cyber"] {
  --bg:#030712;--bg2:#0d1117;--bg3:#161b22;--card:#0f1923;
  --border:rgba(0,255,128,.12);
  --green:#00ff80;--green2:#00cc66;--purple:#a855f7;--cyan:#22d3ee;
  --red:#f87171;--yellow:#fbbf24;
  --text:#e2e8f0;--muted:#64748b;
  --navbar-bg:rgba(3,7,18,.95);
  --hero-overlay:rgba(0,255,128,.025);
  --btn-primary-text:#000;
  --matrix-color:#00ff80;
  --input-bg:#161b22;
}

/* LIGHT */
[data-theme="light"] {
  --bg:#f0f4f8;--bg2:#e8edf3;--bg3:#dde4ed;--card:#ffffff;
  --border:rgba(0,0,0,.1);
  --green:#059669;--green2:#047857;--purple:#7c3aed;--cyan:#0284c7;
  --red:#dc2626;--yellow:#d97706;
  --text:#0f172a;--muted:#475569;
  --navbar-bg:rgba(248,250,252,.97);
  --hero-overlay:rgba(5,150,105,.04);
  --btn-primary-text:#fff;
  --matrix-color:#059669;
  --input-bg:#e8edf3;
}

/* OCEAN */
[data-theme="ocean"] {
  --bg:#020b18;--bg2:#041020;--bg3:#071830;--card:#0a1628;
  --border:rgba(34,211,238,.15);
  --green:#22d3ee;--green2:#06b6d4;--purple:#818cf8;--cyan:#38bdf8;
  --red:#f87171;--yellow:#fbbf24;
  --text:#e2e8f0;--muted:#64748b;
  --navbar-bg:rgba(2,11,24,.95);
  --hero-overlay:rgba(34,211,238,.025);
  --btn-primary-text:#000;
  --matrix-color:#22d3ee;
  --input-bg:#071830;
}

/* SUNSET */
[data-theme="sunset"] {
  --bg:#0d0505;--bg2:#180a08;--bg3:#220e0c;--card:#1a0c0a;
  --border:rgba(251,113,80,.15);
  --green:#fb7150;--green2:#e55330;--purple:#f472b6;--cyan:#fbbf24;
  --red:#f87171;--yellow:#fbbf24;
  --text:#fde8e0;--muted:#9d7060;
  --navbar-bg:rgba(13,5,5,.95);
  --hero-overlay:rgba(251,113,80,.025);
  --btn-primary-text:#fff;
  --matrix-color:#fb7150;
  --input-bg:#220e0c;
}

/* PURPLE */
[data-theme="purple"] {
  --bg:#07030f;--bg2:#0d0618;--bg3:#130922;--card:#0e0820;
  --border:rgba(168,85,247,.15);
  --green:#a855f7;--green2:#9333ea;--purple:#c084fc;--cyan:#f0abfc;
  --red:#f87171;--yellow:#fbbf24;
  --text:#f0e7ff;--muted:#7c6a9d;
  --navbar-bg:rgba(7,3,15,.95);
  --hero-overlay:rgba(168,85,247,.03);
  --btn-primary-text:#fff;
  --matrix-color:#a855f7;
  --input-bg:#130922;
}

/* ═══ APPLY VARS ════════════════════════════════════════════════════════════ */
body            { background:var(--bg); color:var(--text); }
.navbar.scrolled{ background:var(--navbar-bg); }
.hero-grid-overlay { background-image:
  linear-gradient(var(--hero-overlay) 1px,transparent 1px),
  linear-gradient(90deg,var(--hero-overlay) 1px,transparent 1px)!important; }
.gradient-text  { background:linear-gradient(135deg,var(--green),var(--cyan),var(--purple))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important; }
.btn-primary    { background:linear-gradient(135deg,var(--green2),var(--cyan))!important; color:var(--btn-primary-text)!important; }
input,textarea,select { background:var(--input-bg)!important; color:var(--text)!important; border-color:var(--border)!important; }

/* Light mode specific fixes */
[data-theme="light"] .navbar { border-bottom:1px solid rgba(0,0,0,.08); }
[data-theme="light"] .nav-link { color:#475569; }
[data-theme="light"] .nav-link:hover,[data-theme="light"] .nav-link.active { color:#0f172a; }
[data-theme="light"] .logo-bracket,[data-theme="light"] .logo-cursor { color:var(--green); }
[data-theme="light"] .logo-text { color:#0f172a; }
[data-theme="light"] .project-card,[data-theme="light"] .creative-card,
[data-theme="light"] .blog-card,[data-theme="light"] .product-card { box-shadow:0 2px 16px rgba(0,0,0,.08); }
[data-theme="light"] .terminal-card { background:#1e293b; }
[data-theme="light"] .footer { background:#e2e8f0; border-top:1px solid rgba(0,0,0,.1); }
[data-theme="light"] .footer-brand p,[data-theme="light"] .footer-links a,
[data-theme="light"] .footer-note { color:#475569; }
[data-theme="light"] .hero-tag { background:rgba(5,150,105,.08); border-color:rgba(5,150,105,.2); }
[data-theme="light"] .highlight { background:rgba(5,150,105,.1); color:var(--green); }
[data-theme="light"] .section-tag { color:var(--green); }
[data-theme="light"] .filter-btn { color:#475569; border-color:rgba(0,0,0,.15); }
[data-theme="light"] .filter-btn:hover,[data-theme="light"] .filter-btn.active { border-color:var(--green);color:var(--green); }
[data-theme="light"] .stack-tag { background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.2);color:var(--green); }
[data-theme="light"] .modal-card { background:#fff; }
[data-theme="light"] .hero { background:var(--bg); }
[data-theme="light"] .hero-sub { color:#475569; }
[data-theme="light"] .stat-label { color:#64748b; }

/* ═══ THEME SWITCHER UI ═════════════════════════════════════════════════════ */
.theme-switcher {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.theme-toggle-btn {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--green2),var(--cyan));
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:transform .3s,box-shadow .3s;
}
.theme-toggle-btn:hover { transform:scale(1.1) rotate(15deg); box-shadow:0 6px 28px rgba(0,255,128,.3); }

.theme-panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:16px;
  min-width:200px; box-shadow:0 8px 40px rgba(0,0,0,.4);
  opacity:0; transform:scale(.9) translateY(8px); pointer-events:none;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  transform-origin:bottom right;
}
.theme-panel.open { opacity:1; transform:scale(1) translateY(0); pointer-events:all; }

.theme-panel-header {
  font-family:var(--mono,'Share Tech Mono',monospace);
  font-size:.72rem; color:var(--green); margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }

.theme-option {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--border); border-radius:10px;
  padding:8px 4px; cursor:pointer; transition:all .2s;
}
.theme-option:hover { border-color:var(--green); transform:translateY(-2px); }
.theme-option.active { border-color:var(--green); background:rgba(0,255,128,.06); box-shadow:0 0 12px rgba(0,255,128,.15); }
.theme-option.active .theme-name { color:var(--green); }

.theme-swatch {
  width:36px; height:36px; border-radius:8px;
  border:2px solid rgba(255,255,255,.1);
}
.theme-name { font-size:.65rem; color:var(--muted); font-family:var(--mono,'Share Tech Mono',monospace); }

/* Swatches */
.sw-cyber  { background:linear-gradient(135deg,#030712 50%,#00ff80); }
.sw-light  { background:linear-gradient(135deg,#f0f4f8 50%,#059669); }
.sw-ocean  { background:linear-gradient(135deg,#020b18 50%,#22d3ee); }
.sw-sunset { background:linear-gradient(135deg,#0d0505 50%,#fb7150); }
.sw-purple { background:linear-gradient(135deg,#07030f 50%,#a855f7); }

@media(max-width:480px){
  .theme-switcher{bottom:16px;right:16px;}
  .theme-grid{grid-template-columns:repeat(3,1fr);}
}