/* === Wariant A: formalny + zielony (domyślny — już w styles.css) === */
body.v-a {
  /* nic — używa domyślnych wartości ze styles.css */
}

/* === Wariant B: clickbait + czerwony === */
body.v-b {
  --accent: oklch(0.62 0.22 25);
  --accent-ink: oklch(0.45 0.2 25);
  --accent-soft: oklch(0.95 0.04 25);
  --gold: oklch(0.78 0.16 50);
  --gold-soft: oklch(0.96 0.05 55);
  --gold-ink: oklch(0.42 0.13 50);
}
body.v-b .hero {
  background:
    radial-gradient(ellipse 1200px 600px at 20% -20%, oklch(0.94 0.07 25 / 0.55), transparent 60%),
    radial-gradient(ellipse 800px 500px at 90% 10%, oklch(0.96 0.05 50 / 0.55), transparent 60%),
    var(--bg);
}
body.v-b .live-dot {
  background: var(--accent);
  animation: pulse-b 1.2s infinite;
}
@keyframes pulse-b {
  0% { box-shadow: 0 0 0 0 oklch(0.62 0.22 25 / 0.75); }
  60% { box-shadow: 0 0 0 12px oklch(0.62 0.22 25 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.62 0.22 25 / 0); }
}
body.v-b .hero-em {
  background: linear-gradient(120deg, var(--accent) 0%, oklch(0.68 0.22 40) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-style: italic;
}
body.v-b .hero-eyebrow {
  background: oklch(0.95 0.04 25 / 0.9);
  border-color: oklch(0.78 0.1 25);
  color: var(--accent-ink);
  font-weight: 600;
}

/* === Wariant C: konkretny + niebieski === */
body.v-c {
  --accent: oklch(0.55 0.18 245);
  --accent-ink: oklch(0.38 0.16 245);
  --accent-soft: oklch(0.94 0.05 245);
  --gold: oklch(0.65 0.16 240);
  --gold-soft: oklch(0.95 0.04 245);
  --gold-ink: oklch(0.36 0.14 245);
}
body.v-c .hero {
  background:
    radial-gradient(ellipse 1200px 600px at 20% -20%, oklch(0.94 0.05 245 / 0.55), transparent 60%),
    radial-gradient(ellipse 800px 500px at 90% 10%, oklch(0.96 0.04 220 / 0.55), transparent 60%),
    var(--bg);
}
body.v-c .live-dot {
  background: var(--accent);
  animation: pulse-c 2s infinite;
}
@keyframes pulse-c {
  0% { box-shadow: 0 0 0 0 oklch(0.55 0.18 245 / 0.7); }
  70% { box-shadow: 0 0 0 8px oklch(0.55 0.18 245 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.55 0.18 245 / 0); }
}
body.v-c .hero-em {
  background: linear-gradient(120deg, var(--accent) 0%, oklch(0.6 0.17 220) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.04em;
}

/* === Wariant D: lifestyle + fioletowy === */
body.v-d {
  --accent: oklch(0.55 0.22 305);
  --accent-ink: oklch(0.4 0.2 305);
  --accent-soft: oklch(0.95 0.05 305);
  --gold: oklch(0.7 0.18 325);
  --gold-soft: oklch(0.96 0.04 320);
  --gold-ink: oklch(0.42 0.16 315);
}
body.v-d .hero {
  background:
    radial-gradient(ellipse 1200px 600px at 20% -20%, oklch(0.93 0.06 305 / 0.55), transparent 60%),
    radial-gradient(ellipse 800px 500px at 90% 10%, oklch(0.95 0.05 330 / 0.55), transparent 60%),
    var(--bg);
}
body.v-d .live-dot {
  background: var(--accent);
  animation: pulse-d 2.4s infinite;
}
@keyframes pulse-d {
  0% { box-shadow: 0 0 0 0 oklch(0.55 0.22 305 / 0.7); }
  70% { box-shadow: 0 0 0 10px oklch(0.55 0.22 305 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.55 0.22 305 / 0); }
}
body.v-d .hero-em {
  background: linear-gradient(120deg, var(--accent) 0%, oklch(0.68 0.2 330) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 500;
}

/* Shared: variant-specific buttons inherit --accent automatically */
.btn-primary:hover {
  background: var(--accent-ink);
}