/* Body typeface — Inter, and display face Stack Sans Headline:
   beide als lokale @font-face in tokens/fonts.css (kein Google-Fonts-CDN). */

:root {
  /* ============ Families ============ */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Stack Sans Headline', 'Inter', sans-serif;

  /* ============ Weights ============ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Headings render at Regular weight — Stack Sans Headline already reads bold. */
  --font-weight-heading: var(--font-weight-regular);

  /* ============ Heading scale (display font) ============
     RESPONSIVE HOUSE RULE: headlines are FLUID. Each step clamps from its
     mobile size (at a 390px viewport) to its desktop size (at 1440px) and
     scales continuously in between — no hard jump at the breakpoint.
     Tracking is em-based (converted from the original px at desktop size)
     so it tightens proportionally as the size shrinks.
     Body text is NOT fluid — it STEPS at the mobile breakpoint (see the
     @media block below + tokens/breakpoints.css). */
  --text-h1: clamp(40px, calc(31.09px + 2.286vw), 64px);   --leading-h1: 1.2;  --tracking-h1: -0.015em;   /* 64 desktop → 40 mobile */
  --text-h2: clamp(32px, calc(26.06px + 1.524vw), 48px);   --leading-h2: 1.3;  --tracking-h2: -0.031em;   /* 48 → 32 */
  --text-h3: clamp(28px, calc(23.54px + 1.143vw), 40px);   --leading-h3: 1.4;  --tracking-h3: -0.0375em;  /* 40 → 28 */
  --text-h4: clamp(24px, calc(21.03px + 0.762vw), 32px);   --leading-h4: 1.4;  --tracking-h4: -0.015em;   /* 32 → 24 */
  --text-h5: clamp(22px, calc(19.77px + 0.571vw), 28px);   --leading-h5: 1.5;  --tracking-h5: -0.05em;    /* 28 → 22 */
  --text-h6: clamp(20px, calc(18.51px + 0.381vw), 24px);   --leading-h6: 1.5;  --tracking-h6: -0.05em;    /* 24 → 20 */
  --text-display: clamp(48px, calc(28.69px + 4.952vw), 100px); /* heading-big / oversized hero — 100 → 48 */

  /* ============ Body scale ============ */
  --text-80: clamp(48px, calc(36.11px + 3.048vw), 80px);    /* oversized stat / display number — fluid like the headlines, 80 → 48 */
  --text-xxl: 22px;   --leading-xxl: 33px;  --tracking-xxl: 0em;
  --text-xl: 20px;    --leading-xl: 30px;   --tracking-xl: -0.02em;
  --text-l: 18px;     --leading-l: 27px;    --tracking-l: -0.01em;
  --text-m: 16px;     --leading-m: 24px;    --tracking-m: 0em;
  --text-s: 14px;     --leading-s: 21px;    --tracking-s: 0em;   /* base body — 14 / 400 / 21 */
  --text-sm: 12px;    --leading-sm: 18px;

  /* Base body text — THE default typeface + scale for website Fließtext / body
     copy. Fließtext, Links und sonstiger Grundtext nutzen dies.
     Alias auf Bodyscale Text S (14 / regular / 21). */
  --text-body-base: var(--text-s);
  --leading-body-base: var(--leading-s);
  --tracking-body-base: var(--tracking-s);
  --font-weight-body-base: var(--font-weight-regular);

  /* Button label */
  --text-button: 16px;
}

/* ============ Mobile body steps — ≤640px ============
   Body sizes are STEPPED, not fluid: one hard step at the mobile breakpoint
   (tokens/breakpoints.css). Base body Text S (14/21) and Text M (16/24) do
   not step — they are already mobile-sized. */
@media (max-width: 640px) {
  :root {
    --text-xxl: 18px; --leading-xxl: 27px;
    --text-xl: 18px;  --leading-xl: 27px;
    --text-l: 16px;   --leading-l: 24px;
  }
}

/* ============ Heading accent dot — HOUSE RULE ============
   A period ending a headline always carries the brand accent orange (#ff4000),
   echoing the orange period in the moe. logo. Works on any surface: the accent
   is fixed, so it reads the same on black-on-light and white-on-dark headings.
   Wrap the trailing period: <h1>Wachstum durch Design<span class="ds-hdot">.</span></h1> */
.ds-hdot {
  color: var(--color-accent);
}