/* Bullitt Ventures · fælles grundlag for de tre designs (A Magasin, B Studio, C Motorsport).
   ─────────────────────────────────────────────────────────────────────────────
   FARVEN: bilens farve er ÉT token, --bullitt (Antons valg 6/10, D1: Highland Green).
   build.py, tools/logo.py og tools/billeder.py læser den herfra; kør ./byg-alt.sh efter en ændring.
   Selve designet står i css/a.css, b.css eller c.css. Live indlæses kun det valgte.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --bullitt: #1f3d2c;

  --creme: #f4efe3;
  --creme-2: #ebe4d3;
  --papir: #faf7f0;
  --krom: #aab0b5;
  --krom-moerk: #6b7177;
  --asfalt: #18191b;

  --bullitt-lys: color-mix(in oklab, var(--bullitt) 50%, #ffffff);
  --bullitt-lys: oklch(from var(--bullitt) 0.8 calc(c + 0.035) h); /* samme kulør, lysere; ældre browsere bruger linjen over */
  --bullitt-dyb: color-mix(in oklab, var(--bullitt) 78%, #000000);

  --maks: 1120px;
  --kant: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.wrap { max-width: var(--maks); margin: 0 auto; padding: 0 var(--kant); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; }
.pil::after { content: " \2192"; }

/* ── Staging-bjælken (kun når config.json → staging_designvalg er true) ──── */
.staging { position: relative; z-index: 20; background: #ffd84d; color: #18191b; font: 600 .92rem/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.staging-ind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding-top: 8px; padding-bottom: 8px; }
.staging p { margin: 0; }
.tema-skift { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tema-skift a { color: #18191b; text-decoration: none; border: 1.5px solid #18191b; border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.tema-skift a:hover { background: #fff3c4; }
[data-tema="a"] .tema-skift a[data-v="a"], [data-tema="b"] .tema-skift a[data-v="b"],
[data-tema="c"] .tema-skift a[data-v="c"], [data-tema="d"] .tema-skift a[data-v="d"] { background: #18191b; color: #ffd84d; }