/* OASIS STYLE SYSTEM v1 - Readable Cyber Base */
:root {
  --bg: #0A0A0A;
  --bg-card: #1A1A1A;
  --bg-border: #2A2A2A;
  --text: #F5F5F0;
  --text-dim: #9A9A9A;
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 16px;
  --line-height-body: 1.6;
}

/* BASE TYPOGRAPHY - Readable first */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--line-height-body);
  background: var(--bg);
  color: var(--text);
}

h1 { font-family: var(--font-headline); font-size: 48px; font-weight: 700; line-height: 1.1; }
h2 { font-family: var(--font-headline); font-size: 32px; font-weight: 700; line-height: 1.2; }
h3 { font-family: var(--font-headline); font-size: 24px; font-weight: 600; }

/* FIXED: Hero-only glitch toggle - not everywhere */
.hero-glitch {
  font-family: 'Syne', 'Space Grotesk', sans-serif;
  font-weight: 800;
  /* glitch only when .glitch-on is present and only for hero */
}
.hero-glitch.glitch-on {
  text-shadow: 2px 0 #BFFF00, -2px 0 #8A2BE2;
  animation: glitch 0.3s infinite alternate;
}
@keyframes glitch {
  0% { transform: translate(0); }
  100% { transform: translate(1px, -1px); }
}

/* SKIN 1: ZEX / CLASH / PATRICK / PSYBINATE */
[data-theme="zex"] {
  --bg: #080008;
  --bg-card: #140A1A;
  --bg-border: #2A1A3A;
  --text: #F5F5F0;
  --accent: #BFFF00;
  --accent-2: #8A2BE2;
  --accent-3: #FF006B;
  --grid-color: rgba(138, 43, 226, 0.15);
  --font-headline: 'Space Grotesk', sans-serif; /* readable base */
  --font-hero: 'Syne', sans-serif; /* hero only */
}

/* SKIN 2: OASIS AUTOMATES - Business Cyber */
[data-theme="oasis"] {
  --bg: #080C10;
  --bg-card: #0F1A1E;
  --bg-border: #1E2E35;
  --text: #E8F5F0;
  --accent: #00FF94;
  --accent-2: #00D1FF;
  --accent-3: #FFD600;
  --grid-color: rgba(0, 255, 148, 0.08);
  --font-headline: 'General Sans', 'Space Grotesk', sans-serif;
}

/* SKIN 3: MUSHROOMFX / JIMMY - Earthy Lab */
[data-theme="mushroom"] {
  --bg: #FFFEF8;
  --bg-card: #F5EFE0;
  --bg-border: #E8DCC6;
  --text: #1A3D2E;
  --text-dim: #6B7A6B;
  --accent: #1A3D2E;
  --accent-2: #C9A86A;
  --accent-3: #8B5A2B;
  --grid-color: rgba(26, 61, 46, 0.06);
  --font-headline: 'Instrument Serif', 'Newsreader', serif;
}
[data-theme="mushroom"].dark {
  --bg: #12140F;
  --bg-card: #1A1E18;
  --bg-border: #2A3328;
  --text: #E8DCC6;
}

/* SKIN 4: WENEED.REHAB - Recovery / Community */
[data-theme="rehab"] {
  --bg: #141414;
  --bg-card: #1E1E1E;
  --bg-border: #2A2A2A;
  --text: #F5F1E8;
  --text-dim: #A0A0A0;
  --accent: #14B8A6;
  --accent-2: #A78BFA;
  --accent-3: #FF6B35;
  --grid-color: rgba(20, 184, 166, 0.1);
  --font-headline: 'General Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --line-height-body: 1.65;
}
[data-theme="rehab"].light {
  --bg: #F5F1E8;
  --bg-card: #FFFFFF;
  --bg-border: #E8E0D0;
  --text: #141414;
  --text-dim: #6B6B6B;
}

/* COMPONENTS */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.2s;
}
.card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(0,0,0,0.1), 0 0 0 1px var(--accent);
}
.btn {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid var(--bg-border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-crisis {
  background: #FF6B35;
  color: white;
  font-weight: 600;
}
.tag {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--bg-border);
  background: var(--bg-card);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-live { background: #00FF94; box-shadow: 0 0 8px #00FF94; }
.status-beta { background: #FFD600; }
.status-archived { background: #666; }