/* ============================================================
   OLIVER ALBACH — design tokens · BLOCK B (Marke)
   Block A (Familie: Raster, Abstände, Typo-Skala, Mono, Bewegung)
   kommt aus assets/shared/tokens.css und wird davor geladen.
   Die Aliase unten hängen die hier gewachsenen Namen an Block A.
   ============================================================ */

/* ---- fonts (self-hosted, no third-party requests) ---- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
/* Metrisch angepasste Fallbacks (Arial, frequenzgewichtete Breite + Ascent/Descent
   der Webfonts): der Swap verschiebt kein Layout mehr → CLS 0. Werte aus den
   woff2 berechnet (fontTools), nicht schätzen. */
@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial');
  size-adjust: 110.92%;
  ascent-override: 88.71%;
  descent-override: 26.33%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.33%;
  ascent-override: 90.26%;
  descent-override: 22.47%;
  line-gap-override: 0%;
}

:root {
  /* ---- palette: one ground, one accent ---- */
  --ink: #0b0b0b;
  --ink-lift: #121212;
  --bone: #ede6d8;
  --ember: #f26a00;

  --bone-70: rgb(237 230 216 / 0.70);
  --bone-52: rgb(237 230 216 / 0.52);
  --bone-24: rgb(237 230 216 / 0.24);
  --bone-12: rgb(237 230 216 / 0.12);
  --bone-06: rgb(237 230 216 / 0.06);

  /* ---- sister brands: used ONLY inside #worlds, never as UI colour ---- */
  --w-omo: #d8c3a0;
  --w-omo-ink: #0a0a0a;
  --w-surge: #7a1f2b;
  --w-surge-ink: #0a0a0a;
  --w-mah: #f26a00;
  --w-mah-ink: #2b1300;

  /* ---- type ---- */
  --display: 'Space Grotesk', 'Space Grotesk Fallback', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Inter', 'Inter Fallback', 'Helvetica Neue', Arial, sans-serif;
  --mono: var(--font-mono);

  --fs-hero: clamp(3.4rem, 14vw, 15rem);
  --fs-h2: clamp(2.1rem, 7.2vw, 6rem);
  --fs-h3: clamp(1.5rem, 3.4vw, 2.9rem);
  --fs-lede: clamp(1.12rem, 1.75vw, 1.7rem);
  --fs-body: clamp(1rem, 1.05vw, 1.1rem);
  --fs-mono: clamp(0.7rem, 0.82vw, 0.8rem);
  --fs-mono-s: clamp(0.62rem, 0.72vw, 0.72rem);

  --lh-hero: 0.8;
  --lh-tight: 0.95;
  --lh-body: 1.55;
  --ls-mono: var(--mono-track);

  /* ---- space ---- */
  --pad-l: clamp(46px, 8vw, 152px);
  --pad-r: clamp(20px, 5vw, 92px);
  --rail-x: clamp(17px, 3vw, 60px);
  --sec-y: clamp(96px, 15vh, 210px);
  --gap: clamp(20px, 3vw, 48px);

  /* ---- rhythm: --beat / --bar (130 BPM) kommen aus Block A ---- */

  --grain-src: url('../img/grain.png');

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: var(--ease-out);

  color-scheme: dark;
}

/* phones: no rail to clear, so the left gutter comes back down */
@media (max-width: 640px) {
  :root {
    --pad-l: 24px;
    --pad-r: 20px;
    --fs-hero: clamp(3.6rem, 20vw, 5.6rem);
  }
}