/* ===========================================================================
   Kento — Spacing, radii, shadows, motion
   ---------------------------------------------------------------------------
   Spacing & Radii aus src/theme/tokens.ts; die in der App real verwendeten
   Karten-Radien (14–22) + Pills (full) ergänzt. Schatten sind dezent & warm
   (ink-getönt), Hero-Buttons werfen einen farbigen Orange-Schatten. Motion:
   immer Easing.out/inOut.cubic, ruhig — KEIN Bounce (CLAUDE.md §1).
=========================================================================== */
:root {
  /* ---- Spacing scale (4-pt) ------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ---- Radii ---------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-row: 14px; /* Album-/Listen-Rows                               */
  --radius-card: 16px; /* Standard-Karte / Rang-Row                       */
  --radius-card-lg: 20px; /* CTA-Karten (Home)                            */
  --radius-card-xl: 22px; /* Level- / Wochenbox-Karte                     */
  --radius-input: 16px; /* Eingabefelder, Buttons (rounded-2xl ≈ 16)      */
  --radius-badge: 13px; /* Avatar / Postfach-Icon (rounded-square)        */
  --radius-full: 9999px; /* Pills / Toggles / runde Buttons               */

  /* ---- Elevation / shadows (warm, dezent — ink-getönt) ---------------- */
  /* Karten heben sich nur sanft ab; nie harte schwarze Schlagschatten.    */
  --shadow-row: 0 1px 4px rgba(31, 36, 34, 0.05);
  --shadow-card: 0 3px 10px rgba(31, 36, 34, 0.05);
  --shadow-card-soft: 0 3px 12px rgba(31, 36, 34, 0.07);
  --shadow-raised: 0 4px 9px rgba(26, 20, 16, 0.12); /* TopBar             */
  --shadow-pop: 0 12px 32px rgba(26, 20, 16, 0.18); /* Modals / Reveal     */

  /* Hero-Button: farbiger Orange-Schatten (die „leuchtende" Aktion).      */
  --shadow-hero: 0 6px 16px rgba(200, 89, 42, 0.35);
  --shadow-hero-soft: 0 2px 6px rgba(224, 122, 76, 0.30);

  /* ---- Backdrops (Modals / Reveals) ----------------------------------- */
  /* Nie pures Schwarz — Frosted-Dark, App bleibt erahnbar (CLAUDE.md §1).  */
  --backdrop: rgba(0, 0, 0, 0.4);
  --backdrop-blur: 12px;

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* @kind other */ /* Easing.out.cubic */
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* @kind other */ /* Easing.inOut.cubic */
  --dur-fast: 220ms; /* @kind other */ /* Backdrops, Press */
  --dur-base: 320ms; /* @kind other */ /* Karten-Mount, Tab-Wechsel */
  --dur-slow: 620ms; /* @kind other */ /* XP-Balken, größere Reveals */

  /* ---- Layout --------------------------------------------------------- */
  --tap-min: 44px; /* iOS Minimum-Hit-Target                              */
  --screen-pad: 16px; /* Standard horizontaler Screen-Rand                 */
  --content-max: 420px; /* max. Breite zentrierter Auth-/Form-Blöcke       */
}