/* Design-Tokens (SPEC.md, Abschnitt 3). Farben, Abstände und Radien nur hier definieren. */
:root {
  /* Farben */
  --bg: #0A0F1C;
  --surface: #121A2B;
  --surface-2: #1A2438;
  --border: #24304A;
  --accent: #3D7BFF;
  --accent-soft: #7FA8FF;
  --accent-dim: #1D3466;
  --on-accent: #FFFFFF;
  --text: #E8ECF5;
  --text-muted: #7C8699;

  --set-warmup: #5B6478;
  --set-volume: #3D7BFF;
  --set-intense: #FF8A3D;

  --success: #3DDC97;
  --warning: #FFC24D;
  --danger: #FF5C6C;

  /* Radien */
  --radius-card: 20px;
  --radius-inner: 14px;
  --radius-pill: 999px;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Schrift */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-xxl: 34px;

  /* Bedienung */
  --tap-min: 44px;
  --transition: 200ms ease;

  /* Fotos und Überlagerungen */
  --photo-overlay: linear-gradient(180deg, rgba(10, 15, 28, 0) 30%, rgba(10, 15, 28, 0.92) 100%);
  --photo-empty: linear-gradient(135deg, #1D3466 0%, #121A2B 70%);
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* Tab-Leiste */
  --tabbar-height: 64px;
  --tabbar-gap: 12px;
  --tabbar-bg: rgba(18, 26, 43, 0.86);
}