// ────────────────────────────────────────────────────────────────
// Tokens · Abstaende, Radien, Z-Index, Motion
// Theme-unabhaengig — einmal in :root.
// ────────────────────────────────────────────────────────────────

// 4-px-Raster
// Kompakter als die erste Fassung: das UI soll dichter werden. Die kleinen
// Stufen (2–6) tragen die Innenabstände der Komponenten, die großen (7–12)
// die Abschnitte — beide sinken um etwa ein Viertel.
$spaces: (
  1: 4px,
  2: 6px,
  3: 10px,
  4: 12px,
  5: 16px,
  6: 20px,
  7: 24px,
  8: 32px,
  9: 40px,
  10: 48px,
  11: 64px,
  12: 80px,
) !default;

$radii: (
  xs:   3px,
  sm:   5px,
  md:   8px,
  lg:   10px,
  xl:   14px,
  pill: 999px,
) !default;

$z-layers: (
  base:     0,
  raised:   10,
  sticky:   100,
  dropdown: 200,
  overlay:  300,
  modal:    400,
  toast:    500,
) !default;

$durations: (
  fast: .15s,
  base: .22s,
  slow: .45s,
) !default;

$easings: (
  base: ease,
  out:  cubic-bezier(.2, .7, .2, 1),
) !default;

// Vertikaler Grundabstand der "Buehne" (wie im Bestand).
$pad-y: clamp(18px, 3vh, 36px) !default;

@mixin dimension-tokens {
  @each $name, $value in $spaces {
    --sp-#{$name}: #{$value};
  }
  @each $name, $value in $radii {
    --r-#{$name}: #{$value};
  }
  @each $name, $value in $z-layers {
    --z-#{$name}: #{$value};
  }
  @each $name, $value in $durations {
    --dur-#{$name}: #{$value};
  }
  @each $name, $value in $easings {
    --ease-#{$name}: #{$value};
  }
  --pad-y: #{$pad-y};
}