/* Option B — Slate + Teal tokens */
:root[data-theme="slate-teal"]{
  --bg:#0F172A;           /* slate-900 */
  --surface:#111827;      /* gray-900 */
  --text:#E5E7EB;         /* gray-200 */
  --muted:#94A3B8;        /* slate-400 */
  --border:#1F2937;       /* gray-800 */

  --accent-400:#2DD4BF;   /* teal-400 */
  --accent-500:#14B8A6;   /* teal-500 */
  --accent-600:#06B6D4;   /* cyan-500 */

  --accent-rgb:20,184,166;   /* teal-500 rgb */
  --accent2-rgb:6,182,212;   /* cyan-500 rgb */
  --shadow-rgb:0,0,0;
}

/* Map your existing Tailwind classes to tokens so you avoid editing markup */
body.bg-black { background: var(--bg) !important; }
.text-white { color: var(--text) !important; }
.text-gray-400 { color: var(--muted) !important; }
.border-gray-800 { border-color: var(--border) !important; }

/* Accent utility overrides */
.text-blue-400,.text-purple-400,.text-pink-400,.text-green-400 { color: var(--accent-400) !important; }
.hover\:text-blue-400:hover,.hover\:text-purple-400:hover,.hover\:text-pink-400:hover { color: var(--accent-400) !important; }
.group:hover .group-hover\:text-blue-400,
.group:hover .group-hover\:text-blue-300 { color: var(--accent-400) !important; }
.hover\:bg-blue-600:hover,.hover\:bg-purple-600:hover { background-color: var(--accent-600) !important; }

/* Glass on dark slate */
.glass{
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}
.glass-heavy{
  background: rgba(17,24,39,0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
}
/* Safari-safe chips */
span.glass{ background-color: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; }

/* Global gradient text, border shimmer, grid lines */
.gradient-text{
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.animated-border{
  background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb),0.35), rgba(var(--accent-rgb),0.35), transparent);
  background-size: 200% 100%;
  animation: border-dance 3s ease-in-out infinite;
}
.grid-lines{
  background-image:
    linear-gradient(rgba(var(--accent-rgb),0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.04) 1px, transparent 1px);
}

/* Scrollbar tuned for dark */
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.28); }

/* Top-of-page soft orbs replacing blue/purple/pink blocks */
.orb-soft{ position:absolute; border-radius:9999px; filter:blur(100px); opacity:0.18; animation:float 20s ease-in-out infinite; }
.orb-soft-1{ width:18rem; height:18rem; top:5rem; left:2.5rem; background:radial-gradient(circle, rgba(var(--accent2-rgb),0.70), transparent 60%); }
.orb-soft-2{ width:24rem; height:24rem; right:2.5rem; bottom:5rem; background:radial-gradient(circle, rgba(var(--accent-rgb),0.60), transparent 60%); animation-delay:-5s; filter:blur(120px); }
.orb-soft-3{ width:20rem; height:20rem; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(var(--accent2-rgb),0.50), transparent 60%); opacity:0.10; animation-delay:-10s; }

/* Hero computational orbs */
.orb{ position:absolute; filter:blur(40px); animation:float 20s ease-in-out infinite, morph 15s ease-in-out infinite; }
.hero-orb-1{ width:800px; height:800px; top:-200px; left:-200px;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb),0.30), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(var(--accent2-rgb),0.20), transparent 60%);
}
.hero-orb-2{ width:600px; height:600px; right:-100px; bottom:-100px;
  background: radial-gradient(circle at 70% 30%, rgba(var(--accent2-rgb),0.28), transparent 60%);
  animation-delay:-5s;
}
.hero-orb-3{ width:700px; height:700px; left:50%; top:50%; transform:translate(-50%,-50%);
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),0.25), transparent 60%);
  animation-delay:-10s;
}

/* Mouse spotlight, glow */
.interactive-glow{ background: radial-gradient(circle, rgba(var(--accent-rgb),0.10) 0%, transparent 72%); }
.flashlight{
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, rgba(var(--accent-rgb),0.05) 22%, transparent 62%);
}
.flashlight-core{
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(var(--accent-rgb),0.10) 28%, transparent 68%);
}

/* Focus outlines */
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent-500); outline-offset:2px; }

/* Hero section background override */
#home {
  background: var(--bg) !important;
}

/* Cache-busting comment - Updated: 2025.08.22.15:58 */