/**
 * Theme · Cyberpunk
 * ═══════════════════════════════════════════════════════════════════════
 * Neon-noir street aesthetic. Deep purple-black base, hot magenta + cyan
 * + electric yellow accents. Glitch effects, sharp angles, cut-out
 * borders. Complements Synthwave (retrowave) but leans aggressive /
 * anti-establishment rather than dreamy.
 * Identifier: data-theme="cyberpunk"
 *
 * Google Fonts needed (already loaded): Space Grotesk, Inter Tight, JetBrains Mono
 */

[data-theme="cyberpunk"] {
  --bg:           #0D0221;
  --bg-2:         #150535;
  --bg-elevated:  #1A0644;

  --fg:           #E0DEF2;
  --fg-muted:     #8A84A8;
  --fg-faint:     #4A4470;

  --accent:       #FF2A6D;              /* hot magenta */
  --accent-2:     #05D9E8;              /* electric cyan */
  --accent-3:     #D1F7FF;              /* pale cyan */

  --border:        rgba(255, 42, 109, 0.14);
  --border-strong: rgba(255, 42, 109, 0.35);
  --radius:        0px;
  --radius-sm:     0px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter Tight', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --display-weight:   800;
  --display-tracking: -0.04em;
  --display-leading:  1.0;

  --code-bg:       #070115;
  --code-fg:       #E0DEF2;
  --code-fg-muted: #8A84A8;
  --code-border:   rgba(5, 217, 232, 0.12);
  --tok-keyword:   #FF2A6D;
  --tok-string:    #05D9E8;
  --tok-func:      #D1F7FF;
  --tok-comment:   #4A4470;
  --tok-num:       #FFE066;
  --tok-class:     #FF6EC7;
  --tok-self:      #8A84A8;
  --tok-dec:       #05D9E8;
  --tok-attr:      #8A84A8;
}

/* ── Glitch scanline overlay ─────────────────────────────────────────── */
[data-theme="cyberpunk"] body {
  background-image:
    repeating-linear-gradient(0deg, rgba(5,217,232,0.03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #0D0221 0%, #150535 100%);
}

/* ── Hero — glitch title ────────────────────────────────────────────── */
[data-theme="cyberpunk"] .hero-title {
  text-shadow: 0 0 20px rgba(255,42,109,0.4), 0 0 60px rgba(5,217,232,0.15);
}
[data-theme="cyberpunk"] .hero-title em {
  font-style: normal;
  color: var(--accent-2);
  text-shadow: 0 0 12px rgba(5,217,232,0.5);
}
[data-theme="cyberpunk"] .hero-eyebrow {
  background: rgba(255,42,109,0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
}
[data-theme="cyberpunk"] .hero-eyebrow::before { border-radius: 0; }

/* ── Buttons — hard angles, neon outlines ───────────────────────────── */
[data-theme="cyberpunk"] .btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
[data-theme="cyberpunk"] .btn-primary {
  background: var(--accent);
  color: #0D0221;
  box-shadow: 0 0 20px rgba(255,42,109,0.4), inset 0 0 0 1px rgba(209,247,255,0.15);
}
[data-theme="cyberpunk"] .btn-primary:hover {
  box-shadow: 0 0 30px rgba(255,42,109,0.6), inset 0 0 0 1px rgba(209,247,255,0.25);
}
[data-theme="cyberpunk"] .btn-ghost {
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
}
[data-theme="cyberpunk"] .btn-ghost:hover { background: rgba(5,217,232,0.08); }
[data-theme="cyberpunk"] .btn-danger { background: #FF2A6D; color: #fff; }

/* ── Features — neon-cut cards ───────────────────────────────────────── */
[data-theme="cyberpunk"] .feature {
  border: 1px solid var(--border-strong);
  border-radius: 0;
  border-top: 2px solid var(--accent);
  background: var(--bg-2);
}
[data-theme="cyberpunk"] .feature-num {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
}
[data-theme="cyberpunk"] .feature-icon { color: var(--accent-2); }
[data-theme="cyberpunk"] .feature-title em { color: var(--accent-2); font-style: normal; }
[data-theme="cyberpunk"] .feature-tag {
  background: rgba(5,217,232,0.12);
  color: var(--accent-2);
  border: 1px solid rgba(5,217,232,0.25);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}

[data-theme="cyberpunk"] .section-title em {
  color: var(--accent-2);
  font-style: normal;
  text-shadow: 0 0 8px rgba(5,217,232,0.3);
}

/* ── Stats — neon dividers ───────────────────────────────────────────── */
[data-theme="cyberpunk"] .stats-grid {
  border-radius: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
}
[data-theme="cyberpunk"] .stat { border-right: 1px solid var(--border); }
[data-theme="cyberpunk"] .stat-num { color: var(--accent); }

/* ── Install — neon border ───────────────────────────────────────────── */
[data-theme="cyberpunk"] .install-wrap {
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--bg-2);
}
[data-theme="cyberpunk"] .install-cmd {
  background: var(--code-bg);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--accent-2);
}
[data-theme="cyberpunk"] .install-cmd .prompt { color: var(--accent); }

[data-theme="cyberpunk"] .code-block { border-radius: 0; border: 1px solid var(--border); }

/* ── Control bar ─────────────────────────────────────────────────────── */
[data-theme="cyberpunk"] .control-bar {
  border-bottom: 1px solid var(--border-strong);
  background: rgba(13,2,33,0.9);
  backdrop-filter: blur(12px);
}
[data-theme="cyberpunk"] .chip {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  border: 1px solid var(--border-strong);
}
[data-theme="cyberpunk"] .chip.is-active {
  background: var(--accent);
  color: #0D0221;
  border-color: var(--accent);
}
[data-theme="cyberpunk"] .brand-mark { color: var(--accent); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
[data-theme="cyberpunk"] .tabs-list {
  border-radius: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
}
[data-theme="cyberpunk"] .tab { border-radius: 0; }
[data-theme="cyberpunk"] .tab.is-active {
  background: var(--accent);
  color: #0D0221;
  border: none;
}

/* ── Gallery ─────────────────────────────────────────────────────────── */
[data-theme="cyberpunk"] .gallery-card { border-radius: 0; border: 1px solid var(--border-strong); }
[data-theme="cyberpunk"] .input,
[data-theme="cyberpunk"] .select,
[data-theme="cyberpunk"] textarea.input {
  border-radius: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
}
[data-theme="cyberpunk"] .input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(5,217,232,0.2);
}
[data-theme="cyberpunk"] .alert { border-radius: 0; border-left: 3px solid; }
[data-theme="cyberpunk"] .badge {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}
[data-theme="cyberpunk"] .check-box { border-radius: 0; }
[data-theme="cyberpunk"] .switch-track { border-radius: 0; }
[data-theme="cyberpunk"] .switch-track::after { border-radius: 0; }
[data-theme="cyberpunk"] .progress { background: var(--bg-2); }