/* Ebene 2, Semantic Tokens. Markenübergreifend, für alle Marken identisch.
   Leitet ausschließlich aus Ebene 1 ab. Kein eigener Hex-Wert.
   Was die Token-Datei der Marke nicht deckt, wird per color-mix abgeleitet,
   nicht erfunden (token-model.md Abschnitt 6 Punkt 2).
   color-mix ist Baseline widely available seit Mai 2023. */

:root {
  /* Marke */
  --color-brand-primary: var(--raw-color-primary-500);
  --color-brand-secondary: var(--raw-color-secondary-500);

  /* Interaktion */
  --color-interactive-default: var(--raw-color-primary-500);
  --color-interactive-hover: color-mix(in oklab, var(--raw-color-primary-500) 84%, black);
  --color-interactive-active: color-mix(in oklab, var(--raw-color-primary-500) 72%, black);
  --color-focus-ring: var(--color-interactive-default);

  /* Neutral-Rampe, abgeleitet aus neutral.900 und neutral.0 */
  --color-text-primary: color-mix(in oklab, var(--raw-color-neutral-900) 88%, white);
  --color-text-secondary: color-mix(in oklab, var(--raw-color-neutral-900) 62%, white);
  --color-text-muted: color-mix(in oklab, var(--raw-color-neutral-900) 46%, white);
  --color-text-inverse: color-mix(in oklab, var(--raw-color-neutral-0) 92%, black);
  --color-surface-default: var(--raw-color-neutral-0);
  --color-surface-muted: color-mix(in oklab, var(--raw-color-neutral-900) 3%, white);
  --color-surface-inverse: var(--raw-color-neutral-100);
  --color-surface-accent: var(--color-brand-primary);
  --color-border-default: color-mix(in oklab, var(--raw-color-neutral-900) 12%, white);

  /* Schrift */
  --font-heading: var(--raw-font-family-heading);
  --font-body: var(--raw-font-family-body);

  /* Raster, Invariante layout-grammar.md 2.1 */
  --grid-gutter: 24px;
  --container-pad-x: clamp(1rem, 4vw, 2.5rem);
  --container-max: 1200px;
  --container-narrow: 720px;

  /* Breakpoints. Dokumentierend. Media Queries brauchen literale Werte,
     Custom Properties funktionieren dort nicht. Andere Werte sind nicht erlaubt. */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Sektionsrhythmus, Invariante 2.2. Für alle Marken identisch.
     Wird vom Dichtefaktor der Marke ausdrücklich nicht skaliert. */
  --space-section-y: clamp(4rem, 8vw, 7.5rem);
  --space-section-head: clamp(2rem, 4vw, 3.5rem);

  /* Spacing-Skala, 8px-Basis. Stufen als Vorschlag, PR gegen layout-grammar.md
     ausstehend (Spec 4.6). Bis dahin gilt dieser Stand. */
  --space-1: 0.5rem;  /*   8px */
  --space-2: 1rem;    /*  16px */
  --space-3: 1.5rem;  /*  24px */
  --space-4: 2rem;    /*  32px */
  --space-5: 3rem;    /*  48px */
  --space-6: 4rem;    /*  64px */
  --space-7: 5rem;    /*  80px */
  --space-8: 6rem;    /*  96px */
  --space-9: 8rem;    /* 128px */
  --space-10: 10rem;  /* 160px */

  /* Typo-Skala, Basis 1rem, Verhältnis 1.25, Invariante 2.3.
     Stufen als Vorschlag, PR ausstehend (Spec 4.6). */
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-4xl: 3.815rem;
  --text-display-1: clamp(2.441rem, 5vw, 3.815rem);
  --text-display-2: clamp(1.953rem, 3.5vw, 2.441rem);
  --text-leading-tight: 1.15;
  --text-leading-body: 1.6;

  /* Radius, Freiheitsgrad 3.2. Alles leitet aus einem Wert ab. */
  --radius-button: var(--raw-radius-base);
  --radius-card: var(--raw-radius-base);
  --radius-image: var(--raw-radius-base);

  /* Dichte, Freiheitsgrad 3.3. Skaliert nur Innenabstände von Bausteinen. */
  --density: var(--raw-space-density);

  /* Bewegung, Invariante 2.6 */
  --motion-fast: 150ms;
  --motion-base: 250ms;

  /* Schatten und Z-Index. Invariante 2.6 erklärt sie als gruppenweit identisch,
     bewertet sie aber nirgends. Diese Werte sind ein Vorschlag, als Lücke gemeldet. */
  --shadow-flat: none;
  --shadow-raised: 0 1px 3px color-mix(in oklab, var(--raw-color-neutral-900) 12%, transparent);
  --z-header: 50;
  --z-hinweis: 60;
  --z-widget: 70;
}

/* Mobile Gutter, Invariante 2.1 */
@media (max-width: 640px) {
  :root { --grid-gutter: 16px; }
}

/* Optische Größenkalibrierung, genau einmal global.
   font-size-adjust ist Baseline seit Juli 2024, einwertige Zahlensyntax. */
body {
  font-size-adjust: var(--raw-font-size-adjust);
}