/* =====================================================================
   Genre themes — token overrides + per-theme page effects.
   The default (SB 2026 brand) lives in base.css :root.
   ===================================================================== */

[data-theme="black"]{
  --bg: oklch(0.11 0.004 270);
  --surface: oklch(0.145 0.004 270);
  --surface-2: oklch(0.18 0.004 270);
  --line: oklch(0.32 0.005 270);
  --tx: oklch(0.93 0.015 85);
  --tx-2: oklch(0.66 0.012 85);
  --accent: oklch(0.9 0.025 85);
  --accent-ink: oklch(0.13 0.005 85);
  --accent-2: oklch(0.55 0.01 85);
  --disp: 'Grenze Gotisch', serif;
  --disp-hero: 'XXII Black Metal', 'Grenze Gotisch', serif;
  --disp-weight: 600;
  --radius: 0px; --radius-sm: 0px;
  --glow: none;
  --h-spacing: 0.01em;
}
[data-theme="death"]{
  --bg: oklch(0.125 0.018 22);
  --accent-text: oklch(0.68 0.19 27);
  --surface: oklch(0.165 0.022 22);
  --surface-2: oklch(0.2 0.026 22);
  --line: oklch(0.34 0.05 25);
  --tx: oklch(0.92 0.012 30);
  --tx-2: oklch(0.68 0.03 28);
  --accent: oklch(0.53 0.2 27);
  --accent-ink: oklch(0.95 0.01 30);
  --accent-2: oklch(0.4 0.14 27);
  --disp: 'Nosifer', cursive;
  --disp-hero: 'Brutal Tooth', 'Nosifer', cursive;
  --disp-weight: 400;
  --radius: 4px; --radius-sm: 3px;
  --glow: none;
  --h-spacing: 0.03em;
}
[data-theme="hardcore"]{
  --bg: oklch(0.13 0 0);
  --surface: oklch(0.17 0 0);
  --surface-2: oklch(0.21 0 0);
  --line: oklch(0.85 0 0);
  --tx: oklch(0.96 0 0);
  --tx-2: oklch(0.7 0 0);
  --accent: oklch(0.86 0.17 95);
  --accent-ink: oklch(0.15 0.02 95);
  --accent-2: oklch(0.96 0 0);
  --disp: 'Black Ops One', system-ui, sans-serif;
  --disp-hero: 'New York Hardcore', 'Black Ops One', system-ui, sans-serif;
  --disp-weight: 400;
  --radius: 0px; --radius-sm: 0px;
  --glow: none;
  --h-transform: uppercase;
  --h-spacing: 0.06em;
  --chip-border: 2px;
}
[data-theme="glam"]{
  --bg: oklch(0.16 0.045 325);
  --surface: oklch(0.2 0.055 325);
  --surface-2: oklch(0.245 0.06 325);
  --line: oklch(0.42 0.09 335);
  --tx: oklch(0.95 0.015 340);
  --tx-2: oklch(0.74 0.05 335);
  --accent: oklch(0.72 0.23 350);
  --accent-ink: oklch(0.14 0.04 350);
  --accent-2: oklch(0.66 0.19 300);
  --disp: 'Monoton', cursive;
  --disp-hero: 'Die Nasty', 'Monoton', cursive;
  --disp-weight: 400;
  --radius: 16px; --radius-sm: 10px;
  --glow: 0 0 14px oklch(0.72 0.23 350 / 0.55);
  --h-spacing: 0.08em;
}
[data-theme="thrash"]{
  --bg: oklch(0.13 0.012 135);
  --surface: oklch(0.165 0.016 135);
  --surface-2: oklch(0.2 0.02 135);
  --line: oklch(0.36 0.05 132);
  --tx: oklch(0.94 0.02 130);
  --tx-2: oklch(0.7 0.04 130);
  --accent: oklch(0.85 0.23 130);
  --accent-ink: oklch(0.16 0.04 130);
  --accent-2: oklch(0.75 0.16 95);
  --disp: 'Metal Lord', system-ui, sans-serif;
  --disp-weight: 400;
  --radius: 3px; --radius-sm: 2px;
  --glow: none;
  --h-skew: skewX(-6deg);
  --h-spacing: 0.03em;
}

/* ---------- per-theme page effects ---------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .5s ease}
[data-theme="black"] .fx-grain{
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
[data-theme="death"] .fx-vignette{opacity:1;background:radial-gradient(ellipse at 50% 20%, transparent 45%, oklch(0.07 0.03 22 / 0.75) 100%)}
[data-theme="glam"] .fx-glowtop{opacity:1;background:radial-gradient(ellipse 90% 40% at 50% -10%, oklch(0.72 0.23 350 / 0.16), transparent 70%)}

/* logo recoloring per genre */
[data-theme="black"] .logo-img{filter:grayscale(1) contrast(1.1)}
[data-theme="hardcore"] .logo-img{filter:grayscale(1) contrast(1.35)}
[data-theme="thrash"] .logo-img{filter:hue-rotate(215deg) saturate(1.15)}
[data-theme="death"] .logo-img{filter:hue-rotate(120deg) saturate(1.6) brightness(.95)}
[data-theme="glam"] .logo-img{filter:hue-rotate(75deg) saturate(1.7)}

/* thrash zigzag section divider */
.divider{display:none;height:12px;margin-top:var(--space-2xl)}
[data-theme="thrash"] .divider{
  display:block;
  background:repeating-linear-gradient(-45deg, var(--accent) 0 8px, transparent 8px 16px);
  clip-path:polygon(0 40%, 100% 0, 100% 60%, 0 100%);
  opacity:.6;
}
[data-theme="thrash"] .divider + section{margin-top:var(--space-lg)}