/*
 * tokens.css — Design-Tokens des Technical Riders, übernommen aus
 * loop/css/tokens.css (einfarbig Schwarz/Weiß, keine Akzentfarbe).
 * Anders als in der Loop-App darf die Seite scrollen.
 */
:root {
  --fs: 16px;
  --sp: 8px;

  --fs-xs: calc(var(--fs) * 0.75);
  --fs-sm: calc(var(--fs) * 0.875);
  --fs-md: var(--fs);
  --fs-lg: calc(var(--fs) * 1.25);
  --fs-xl: calc(var(--fs) * 1.5);

  --sp-1: calc(var(--sp) * 0.5);
  --sp-2: var(--sp);
  --sp-3: calc(var(--sp) * 1.5);
  --sp-4: calc(var(--sp) * 2);
  --sp-6: calc(var(--sp) * 3);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-pill: 999px;

  --bar-bg: rgba(0, 0, 0, 0.6);
  --bar-fg: #ffffff;
  --bar-fg-dim: rgba(255, 255, 255, 0.6);
  --bar-border: rgba(255, 255, 255, 0.15);
  --bar-hover: rgba(255, 255, 255, 0.12);
  --bar-active: rgba(255, 255, 255, 0.22);
  --bar-input: rgba(255, 255, 255, 0.08);

  --transition-fast: 120ms ease;
  --transition-mid: 240ms ease;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--fs-md);
  color: var(--bar-fg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button {
  font-family: inherit;
  color: inherit;
}