/* ============================================================
   ZENTRALES WEBDESIGN-SYSTEM — CORE TOKENS
   AS Service GmbH · /srv/projects/webdesign-system
   Eine zentrale Wahrheit. Archetypen überschreiben nur Variablen,
   nie Strukturregeln.
   ============================================================ */

:root {
  /* ---------- FLUID TYPE SCALE ----------
     Basis 16–19px fluid, Skala ~1.25 (Major Third) mobil
     bis ~1.333 (Perfect Fourth) auf großen Screens.
     Display-Größen wachsen deutlich stärker als Fließtext:
     eine Seite auf 1920px+ braucht große, selbstbewusste
     Headlines — nicht nur mehr Weißraum. */
  --text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.85rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.1875rem);
  --text-md:   clamp(1.125rem, 1.05rem + 0.4vw,  1.375rem);
  --text-lg:   clamp(1.35rem,  1.2rem  + 0.75vw, 1.75rem);
  --text-xl:   clamp(1.7rem,   1.4rem  + 1.4vw,  2.5rem);
  --text-2xl:  clamp(2.1rem,   1.6rem  + 2.4vw,  3.5rem);
  --text-3xl:  clamp(2.6rem,   1.8rem  + 3.8vw,  5rem);
  --text-display: clamp(3rem,  1.9rem  + 5.5vw,  7rem);

  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.14em;

  /* ---------- SPACING (fluid, 8er-Logik) ---------- */
  --space-2xs: clamp(0.25rem, 0.24rem + 0.1vw, 0.375rem);
  --space-xs:  clamp(0.5rem,  0.46rem + 0.2vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 0.7rem  + 0.3vw, 1rem);
  --space-md:  clamp(1rem,    0.9rem  + 0.5vw, 1.5rem);
  --space-lg:  clamp(1.5rem,  1.3rem  + 1vw,   2.5rem);
  --space-xl:  clamp(2.5rem,  2rem    + 2.2vw, 4.5rem);
  --space-2xl: clamp(4rem,    3rem    + 4vw,   8rem);
  --space-3xl: clamp(6rem,    4.2rem  + 7vw,  13rem);

  /* Sektionsrhythmus: Standard und "Bühne" (Hero, Showpieces) */
  --section-pad: var(--space-2xl);
  --section-pad-stage: var(--space-3xl);

  /* ---------- CONTAINER / GRID ----------
     Regel gegen "pimmelig in der Mitte":
     - Text-Content max 68ch / 880px (Lesbarkeit)
     - Standard-Container 1280px
     - Wide-Container 1600px für Karten-Grids, Galerien
     - Full-bleed für Hero, Medienbänder, Marquees
     - ab 1920px wachsen Ränder UND Medienflächen mit,
       nicht nur der Weißraum links/rechts. */
  --w-prose: 68ch;
  --w-content: 1280px;
  --w-wide: 1600px;
  --w-max: 1920px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2vw, 2rem);

  /* ---------- BILDVERHÄLTNISSE ---------- */
  --ratio-hero: 16 / 9;
  --ratio-card: 4 / 3;
  --ratio-portrait: 3 / 4;
  --ratio-wide: 21 / 9;
  --ratio-square: 1 / 1;

  /* ---------- RADII / BORDERS / SHADOWS ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--c-line);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.07);
  --shadow-md: 0 8px 30px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.16);

  /* ---------- MOTION TOKENS ----------
     Eine Bewegungssprache pro Archetyp: Dauer + Easing
     werden zentral gesetzt, Bausteine nutzen nur Tokens. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* expo-out: modern, ruhig */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* nur Microinteractions */
  --dur-fast: 180ms;
  --dur-base: 350ms;
  --dur-slow: 700ms;
  --dur-reveal: 900ms;
  --reveal-distance: 40px;
  --stagger-step: 90ms;

  /* ---------- FARB-SLOTS (Archetyp füllt sie) ---------- */
  --c-bg: #ffffff;
  --c-bg-alt: #f5f5f4;
  --c-bg-dark: #17181a;       /* dunkle Kontrastsektionen */
  --c-ink: #17181a;           /* Text auf hell */
  --c-ink-soft: #55565a;
  --c-ink-invert: #f7f6f3;    /* Text auf dunkel */
  --c-brand: #1f6f54;         /* Hauptmarkenfarbe */
  --c-brand-ink: #ffffff;     /* Text auf Markenfarbe */
  --c-accent: #d9a441;        /* Akzent, sparsam */
  --c-line: rgb(0 0 0 / 0.12);
  --c-focus: #2563eb;

  /* ---------- SCHRIFT-SLOTS ---------- */
  --font-display: ui-serif, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", monospace;

  /* ---------- Z-LAYER ---------- */
  --z-nav: 100;
  --z-overlay: 200;
}

/* Große Desktops: Skala zieht weiter an, damit 1920/2560px
   nicht wie ein hochskaliertes 1280er-Layout wirken. */
@media (min-width: 1920px) {
  :root {
    --gutter: 5rem;
    --grid-gap: 2.5rem;
  }
}