:root {
  /* ============ Gap scale (flex/grid) ============ */
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-36: 36px;
  --gap-40: 40px;
  --gap-44: 44px;

  /* ============ Padding scale ============ */
  --padding-16: 16px;
  --padding-36: 36px;
  --padding-48: 48px;
  --padding-x: 60px;      /* horizontal section inset */
  --padding-xl: 80px;
  --padding-xxl: 100px;
  --padding-big: 140px;   /* large vertical section rhythm */
  /* Source shorthand steps */
  --padding-1x: 24px;
  --padding-2x: 28px;
  --padding-3x: 12px;
  --padding-4x: 44px;
  --padding-5x: 20px;

  /* ============ Radius scale ============ */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-44: 44px;
  --radius-100: 100%;

  /* ============ Semantic radius ============
     House rule (differs from source): SECTIONS are square-edged for clean
     lines; only buttons and media/images keep their rounding. */
  --radius-section: 0px;          /* structural sections & containers — sharp */
  --radius-button: var(--radius-44);   /* pill button — auch beim Hover */
  --radius-card: var(--radius-24);       /* content cards & bento sections — 24px, always */
  --radius-image-lg: var(--radius-24);   /* large / standalone images — 24px */
  --radius-image-sm: var(--radius-12);   /* small images nested inside a card or other container — 12px */
  --radius-image: var(--radius-image-lg); /* legacy alias — large image default */
  --radius-pill: var(--radius-44);       /* legacy alias (button.css) */

  /* ============ Button geometry ============ */
  --btn-padding-y: 12px;
  --btn-padding-x: 20px;
  --btn-gap: 8px;

  /* ============ Section-link geometry ============ */
  --slink-text: clamp(24px, calc(21.03px + 0.762vw), 32px); /* uppercase label — fluid like the headlines, 32 desktop → 24 mobile */
  --slink-arrow-gap: 22px;   /* wide gap — arrow reads as a marker set left */
  --slink-line-gap: 15px;    /* space between label row and the rule */
  --slink-line-weight: 1px;  /* thin solid orange rule */

  /* ============ Message-text geometry ============
     Big brand-message headline (MessageText). Size/tracking are the H2 step;
     leading is pulled tight for a dense multi-line block. */
  --msg-text: var(--text-h2);          /* 48px */
  --msg-tracking: var(--tracking-h2);  /* -1.5px */
  --msg-leading: 1.12;                 /* tight block leading */

  /* ============ Text-link geometry ============ */
  --tlink-underline-weight: 1px;        /* black rule thickness at rest */
  --tlink-underline-weight-hover: 2px;  /* orange wipe is bolder/thicker on hover */
  --tlink-underline-offset: 1px;        /* small gap: rule sits just under the text */

  /* ============ Section-title geometry ============ */
  --stitle-text: 18px;         /* uppercase label size */
  --stitle-gap: 10px;          /* space between number and label */
  --stitle-tracking: -0.03em;  /* tight tracking on the heavy uppercase */

  /* ============ Motion ============ */
  --transition-btn: 350ms; /* @kind other */
  --transition-link: 180ms; /* @kind other */
}

/* ============ Mobile — ≤640px (tokens/breakpoints.css) ============
   Section rhythm and insets STEP at the mobile breakpoint; the raw gap/radius
   scales and button geometry stay unchanged. */
@media (max-width: 640px) {
  :root {
    --padding-x: 20px;      /* horizontal section inset 60 → 20 */
    --padding-xl: 56px;
    --padding-xxl: 64px;
    --padding-big: 80px;    /* large vertical section rhythm 140 → 80 */
    --stitle-text: 16px;    /* section-title label 18 → 16 */
    --slink-arrow-gap: 14px;
  }
}