/**
 * 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;

  --container: min(1720px, calc(100vw - 48px));
  --radius: var(--radius-lg);

  /* 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);
}