/* ── DNG / KHT — Spacing, Radius, Shadow, Layout ───────────────
   4/8-based rhythm, from the brand's mobile spacing raster. */

:root {
  /* Spacing scale (4/8 grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;   /* page start (mobile) */
  --sp-4: 16px;   /* heading↔text, between elements */
  --sp-5: 24px;   /* section start */
  --sp-6: 32px;   /* section end, page end */
  --sp-8: 48px;
  --sp-10: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Radii — brand works with clear planes, restrained rounding */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;   /* nur Switch/Toggle — Buttons & Karten sind abgerundet, nicht rund */
  --radius-badge: 50%;   /* round logo badges */

  /* Borders */
  --bw-hair: 1px;
  --bw-line: 2px;
  --bw-heavy: 3px;

  /* Shadows — sober, no colored glows in UI (glow reserved for brand art) */
  --shadow-sm: 0 1px 2px rgba(4, 14, 24, 0.16);
  --shadow-md: 0 4px 16px rgba(4, 14, 24, 0.22);
  --shadow-lg: 0 12px 40px rgba(4, 14, 24, 0.32);
  --shadow-cyan: 0 0 0 1px rgba(25, 224, 209, 0.4), 0 6px 28px rgba(25, 224, 209, 0.22);

  /* Layout */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --gutter: 24px;

  /* Motion — brand avoids bounce/gimmick; calm, decisive easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}