/* ============================================================
   PRIME — Tweak overrides
   Three expressive axes: [data-mood] · [data-voice] · [data-density]
   Each one reshapes the whole site by overriding tokens / typography /
   spacing in styles.css. Defaults match the original "acid / display
   / studio" combination so the page reads identically when no tweaks
   are set.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   MOOD — palette + ambient glow
   ───────────────────────────────────────────────────────────── */

/* Acid is the default; declared explicitly so it wins over any
   unset state and so the radial washes always re-render on swap. */
html[data-mood="acid"] {
  --bg: #0d0907;
  --bg-2: #14100c;
  --surface: #1a1511;
  --surface-2: #221c16;
  --line: #2a2420;
  --text: #f4ede0;
  --text-dim: #a39989;
  --text-mute: #6b6155;
  --volt: #ed5a3a;
  --volt-dim: #c84826;
  --copper: #f0d5a8;
  --copper-dim: #d4b888;

  --hero-wash:
    radial-gradient(ellipse at 20% 0%, rgba(237, 90, 58, 0.10), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(240, 213, 168, 0.05), transparent 50%);
  --cta-wash:
    radial-gradient(ellipse at 30% 50%, rgba(237, 90, 58, 0.12), transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(240, 213, 168, 0.06), transparent 60%);
  --calc-bg: var(--copper);
  --calc-fg: #1a1511;
}

/* Concrete — cool monochrome, brutalist steel. Strips warmth out
   of the system: bg becomes a true cool charcoal, accents are
   silver + warm graphite. The calc card flips to charcoal-on-bone
   so the section still reads as a heavyweight tonal break. */
html[data-mood="concrete"] {
  --bg: #0b0c0e;
  --bg-2: #111316;
  --surface: #161a1e;
  --surface-2: #1d2126;
  --line: #2a2f35;
  --text: #eef0f2;
  --text-dim: #9aa1a8;
  --text-mute: #5d6168;
  --volt: #c9ccd1;          /* silver */
  --volt-dim: #9ea2a8;
  --copper: #d8d2c5;        /* bone */
  --copper-dim: #b6b0a3;

  --hero-wash:
    radial-gradient(ellipse at 20% 0%, rgba(201, 204, 209, 0.06), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(216, 210, 197, 0.04), transparent 55%);
  --cta-wash:
    radial-gradient(ellipse at 30% 50%, rgba(201, 204, 209, 0.08), transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(216, 210, 197, 0.05), transparent 60%);
  --calc-bg: #d8d2c5;
  --calc-fg: #16181b;
}

/* Concrete pulls extra restraint everywhere: kill the gradient
   buttons-on-hover lift, drop accents to monochrome, square the
   chip strikethrough so the whole page reads architectural. */
html[data-mood="concrete"] .btn--primary { background: #eef0f2; color: #0b0c0e; }
html[data-mood="concrete"] .btn--primary:hover { background: #fff; }
html[data-mono="concrete"] ::selection { color: #0b0c0e; }
html[data-mood="concrete"] .hero__copy h1 .strike::after { transform: skewY(0deg); }
html[data-mood="concrete"] .nav__logo .dot { background: #eef0f2; }

/* Inferno — hot magenta against ember black. Pushes saturation
   up and warm accents become amber-gold so the contrast against
   magenta is electric, not muddy. */
html[data-mood="inferno"] {
  --bg: #08060a;
  --bg-2: #0f0a14;
  --surface: #15101c;
  --surface-2: #1d1626;
  --line: #2c2336;
  --text: #f6eef5;
  --text-dim: #b09baa;
  --text-mute: #6e5d6a;
  --volt: #ff2d7a;          /* hot magenta */
  --volt-dim: #d2235e;
  --copper: #ffb547;        /* amber */
  --copper-dim: #d99528;

  --hero-wash:
    radial-gradient(ellipse at 20% 0%, rgba(255, 45, 122, 0.16), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 181, 71, 0.08), transparent 55%);
  --cta-wash:
    radial-gradient(ellipse at 30% 50%, rgba(255, 45, 122, 0.18), transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(255, 181, 71, 0.10), transparent 60%);
  --calc-bg: #ffb547;
  --calc-fg: #15101c;
}

html[data-mood="inferno"] .btn--primary:hover { background: #ff5a96; }


/* Wire the wash variables into the elements that render them.
   The hero / cta sections originally hard-coded their gradients;
   now they read --*-wash so swapping mood swaps the ambient. */
.hero {
  background: var(--hero-wash, none), var(--bg);
}
.cta-section {
  background: var(--cta-wash, none), var(--bg);
}

/* Calculator card respects the per-mood inversion. */
.calc {
  background: var(--calc-bg, var(--copper));
  color: var(--calc-fg, #1a1511);
}
.calc h3 { color: var(--calc-fg, #1a1511); }
.calc p { color: color-mix(in oklch, var(--calc-fg, #1a1511) 70%, transparent); }
.calc__field label { color: color-mix(in oklch, var(--calc-fg, #1a1511) 70%, transparent); }
.calc__row .val { color: var(--calc-fg, #1a1511); }
.calc__slider { background: color-mix(in oklch, var(--calc-fg, #1a1511) 15%, transparent); }
.calc__slider::-webkit-slider-thumb {
  background: var(--calc-fg, #1a1511);
  border-color: var(--calc-bg, var(--copper));
  box-shadow: 0 0 0 2px var(--calc-fg, #1a1511);
}
.calc__slider::-moz-range-thumb {
  background: var(--calc-fg, #1a1511);
  border-color: var(--calc-bg, var(--copper));
  box-shadow: 0 0 0 2px var(--calc-fg, #1a1511);
}
.calc__result { background: var(--bg); }


/* ─────────────────────────────────────────────────────────────
   VOICE — type pairing personality
   ───────────────────────────────────────────────────────────── */

/* Display (default) — Anton condensed for hero numerals + Rubik
   black for headlines. Already handled by base styles.css; an
   explicit selector here lets it override Editorial/Brutal when
   the user toggles back. */
html[data-voice="display"] {
  --font-display: "Anton", "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", "Heebo", system-ui, sans-serif;
  --h-weight: 900;
  --h-letter: -0.04em;
  --h-line: 0.88;
  --h-italic: italic;
  --num-font: "Anton", "Rubik", sans-serif;
  --num-letter: 0.01em;
}

/* Editorial — Frank Ruhl Libre is a Hebrew serif with proper
   contrast; pairing with Heebo for body gives the page a
   magazine-feature feel. Drop the heavy 900 weight, slacken
   line-height, ditch the italic-pure flourish. */
html[data-voice="editorial"] {
  --font-display: "Frank Ruhl Libre", "Cormorant Garamond", Georgia, serif;
  --font-body: "Heebo", "Rubik", system-ui, sans-serif;
  --h-weight: 700;
  --h-letter: -0.025em;
  --h-line: 1.0;
  --h-italic: italic;
  --num-font: "Frank Ruhl Libre", Georgia, serif;
  --num-letter: -0.02em;
}

/* The Anton display class is hard-coded in a few stat numbers;
   redirect that family token so they pick up the serif too. */
html[data-voice="editorial"] .num,
html[data-voice="editorial"] .calc__big,
html[data-voice="editorial"] .calc__row .val,
html[data-voice="editorial"] .calc__breakdown div span,
html[data-voice="editorial"] .spec-row__value,
html[data-voice="editorial"] .marquee__item,
html[data-voice="editorial"] .nav__logo {
  font-family: var(--num-font);
  letter-spacing: var(--num-letter);
}
html[data-voice="editorial"] .hero__copy h1 .strike::after { display: none; }
html[data-voice="editorial"] .hero__copy h1 .accent { font-style: italic; }
html[data-voice="editorial"] .marquee__item { font-weight: 600; }

/* Brutal — no condensed type at all. Rubik 900 carries everything,
   tracking goes negative-tighter, the strike on the hero gets
   thicker so a sans-serif headline still has visual weight. */
html[data-voice="brutal"] {
  --font-display: "Rubik", "Heebo", system-ui, sans-serif;
  --font-body: "Rubik", "Heebo", system-ui, sans-serif;
  --h-weight: 900;
  --h-letter: -0.06em;
  --h-line: 0.85;
  --h-italic: normal;
  --num-font: "Rubik", "Heebo", sans-serif;
  --num-letter: -0.04em;
}
html[data-voice="brutal"] .num,
html[data-voice="brutal"] .calc__big,
html[data-voice="brutal"] .calc__row .val,
html[data-voice="brutal"] .calc__breakdown div span,
html[data-voice="brutal"] .spec-row__value,
html[data-voice="brutal"] .marquee__item,
html[data-voice="brutal"] .nav__logo {
  font-family: var(--num-font);
  font-weight: 900;
  letter-spacing: var(--num-letter);
}
html[data-voice="brutal"] .hero__copy h1 .accent { font-style: normal; }
html[data-voice="brutal"] .hero__copy h1 em { font-style: normal !important; }
html[data-voice="brutal"] .hero__copy h1 .strike::after { height: 10px; transform: skewY(0); }
html[data-voice="brutal"] .marquee__item { font-weight: 800; }
html[data-voice="brutal"] .cta-section h2 .accent { font-style: normal !important; }

/* Apply the typography variables across every headline / body
   surface so the voice swap actually reads. */
.hero__copy h1,
h2.section-title,
.cta-section h2 {
  font-weight: var(--h-weight, 900);
  letter-spacing: var(--h-letter, -0.03em);
  line-height: var(--h-line, 0.92);
}
.hero__copy h1 em { font-style: var(--h-italic, italic); }


/* ─────────────────────────────────────────────────────────────
   DENSITY — spacing scale + tracking
   Multiplies section padding, hero padding, section heading gap
   and headline tracking so the page can feel either jammed-up
   editorial or wide-open architectural without re-flowing.
   ───────────────────────────────────────────────────────────── */

html { --d: 1; }
html[data-density="tight"]  { --d: 0.62; --d-track: 0.01em; }
html[data-density="studio"] { --d: 1;    --d-track: 0em; }
html[data-density="roomy"]  { --d: 1.45; --d-track: -0.01em; }

.section          { padding: calc(120px * var(--d)) 0; }
.bigtext          { padding: calc(120px * var(--d)) 0; }
.cta-section      { padding: calc(140px * var(--d)) 0; }
.hero             { padding: calc(120px * var(--d)) 0 calc(80px * var(--d)); }
.section__head    { margin-bottom: calc(72px * var(--d)); gap: calc(48px * var(--d)); }
.hero__stats      { margin-top: calc(64px * var(--d)); padding-top: calc(32px * var(--d)); }
.hero__copy h1    { margin: calc(24px * var(--d)) 0; }
.hero__copy p.lead{ margin: calc(32px * var(--d)) 0 calc(40px * var(--d)); }
.calc             { padding: calc(56px * var(--d)); gap: calc(56px * var(--d)); }
.footer           { padding: calc(80px * var(--d)) 0 calc(32px * var(--d)); }
.footer__grid     { margin-bottom: calc(60px * var(--d)); gap: calc(48px * var(--d)); }

/* Tracking scales too — tight density nudges letters together,
   roomy lets them breathe a hair. Adds on top of voice tracking. */
.hero__copy h1,
h2.section-title,
.cta-section h2,
.bigtext__inner {
  letter-spacing: calc(var(--h-letter, -0.03em) + var(--d-track, 0em));
}