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

// 4-px-Raster
$spaces: (
  1: 4px,
  2: 8px,
  3: 12px,
  4: 16px,
  5: 20px,
  6: 24px,
  7: 32px,
  8: 40px,
  9: 48px,
  10: 64px,
  11: 80px,
  12: 96px,
) !default;

$radii: (
  xs:   4px,
  sm:   6px,
  md:   10px,
  lg:   13px,
  xl:   18px,
  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};
}