/**
 * Layout-Tokens (Spacings, Radii, Container, Shadow).
 *
 * Farb-Variablen werden NICHT hier definiert — sie kommen aus dem Panel
 * via `site/snippets/layout/design-colors.php` (inline <style id="depotheld-design-colors">).
 * So gibt es eine einzige Quelle für Farben → keine Doppelpflege.
 */
:root {
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Radius-Skala (6 Stufen). Werte der bestehenden 3 Stufen bleiben stabil,
     xl/2xl neu für große Karten bzw. Hero/CTA-Bänder. */
  --radius-sm: 8px; /* Chips, Swatches, kleine Buttons (7–9px) */
  --radius-md: 12px; /* Buttons, Inputs, kleine Karten (10–14px) */
  --radius-lg: 18px; /* Standard-Karten (16–22px) */
  --radius-xl: 26px; /* große Karten/Panels (24–28px) */
  --radius-2xl: 32px; /* Hero, CTA-Bänder (32–38px) */
  --radius-pill: 999px;

  /* `100%` statt `calc(100vw - 48px)`: Jeder Container sitzt in einem Elternteil,
     der bereits seitliches Padding hat (Sektion, Footer, Header). Der eigene
     24px-Einzug kam also obendrauf — mobil sprang die Inhaltskante deshalb
     zwischen 14px (Abschnitte ohne Container) und 24px (mit Container).
     Der seitliche Abstand kommt jetzt ausschließlich aus --section-pad-x,
     die Deckelung auf 1720px bleibt. */
  --container: min(1720px, 100%);
  --radius: var(--radius-lg);

  /* ===== Abschnitts-Abstände =====
     Eine Quelle für alle Sektionstypen. Vorher stand das Padding 6× hartcodiert
     in 5 Dateien (92px und 100px), dazu widersprüchliche Mobil-Regeln in
     responsive.css und in den Komponenten selbst. Weil responsive.css zuletzt
     importiert wird, schlug dessen 720px-Regel die 480px-Regel aus forms.css —
     die seitliche Kante lag mobil deshalb je Abschnitt bei 14 oder 18px.

     `-tight` ist für Bänder ohne eigenen Inhalt (CTA, Zitat): Sie sollen nicht
     dasselbe Gewicht bekommen wie ein Abschnitt mit Text. */
  --section-pad-y: 92px;
  --section-pad-y-tight: 56px;
  --section-pad-x: 28px;

  /* Schatten-Skala (3 Stufen + Aliase). */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow: none;
  --shadow-card: none;

  /* Legacy-Aliase (Rückwärtskompatibilität) */
  --color-primary: var(--blue);
  --color-primary-dark: var(--blue-dark);
  --color-accent: var(--accent);
  --color-background: var(--page);
  --color-surface: var(--section-bg);
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);
}

/* Mobil-Stufen der Abschnitts-Abstände. Bewusst HIER und nicht in
   responsive.css: tokens.css wird als eigenes Stylesheet vor app.css geladen,
   die Werte stehen damit allen Komponenten zur Verfügung, ohne dass die
   Import-Reihenfolge über den Ausgang entscheidet. */
@media (max-width: 720px) {
  :root {
    --section-pad-y: 58px;
    --section-pad-y-tight: 40px;
    --section-pad-x: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --section-pad-x: 14px;
  }
}