/* Design tokens – single source of truth for color, spacing, radii, type scale. */
:root {
  /* Surfaces */
  --cream: #fbf7ef;
  --cream-deep: #f3ecdd;
  --paper: #fffdf9;

  /* Brand greens */
  --green: #2f5143;
  --green-deep: #26443a;
  --green-soft: #56705f;

  /* Secondary + accents */
  --sage: #afc1aa;
  --sage-pale: #edf2e9;
  --sage-taupe: #dfdccd;
  --warm: #806455;
  --apricot: #dfad91;
  --apricot-soft: #f3d9c8;

  /* Lines + depth */
  --border: rgba(47, 81, 67, 0.15);
  --shadow-sm: 0 10px 28px rgba(42, 62, 52, 0.08);
  --shadow-lg: 0 28px 70px rgba(42, 62, 52, 0.13);

  /* Layout */
  --header-height: 70px;
  --container: 1180px;
  /* Randlose Elemente ganz oben (Header + Hero) teilen sich eine linke Kante,
     damit das Logo genau über der Hero-Zeile sitzt; ab der Problem-Sektion
     übernimmt wieder das zentrierte --container-Maß.
     --page-gutter  = wo die Haarlinie im Hero steht (der Bundsteg selbst)
     --page-inset   = wo Text und Logo beginnen, also rechts daneben */
  --page-gutter: clamp(1.5rem, 4.4vw, 6.5rem);
  --page-inset: calc(var(--page-gutter) + clamp(0.5rem, 1.7vw, 1.5rem));
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;

  /* Type scale (mobile-first, fluid) */
  --font-h1: clamp(2.45rem, 1.4rem + 3.4vw, 3.9rem);
  --font-h2: clamp(1.9rem, 1.3rem + 2vw, 2.85rem);
  --font-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --font-lead: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);

  /* Motion: the curve already used throughout hover/reveal transitions
     (card lifts, image zooms, the scroll-reveal system) — named here so
     base.css/footer.css/legal.css hover states share it instead of a
     mismatched plain "ease". */
  --motion-fast: 180ms;
  --motion-base: 340ms;
  --motion-slow: 680ms;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --ease-out: var(--ease-smooth);
}