/**
 * PaceLog Design Tokens
 * Zentrale Farben, Abstaende, Radien und Typografie-Werte fuer die App.
 */

:root {
  --bg-primary: #0D0D0F;
  --bg-card: #1A1A1F;
  --bg-elevated: #252530;

  --accent-run: #FF5C35;
  --accent-health: #00D4A8;
  --accent-warn: #FFB800;

  --text-primary: #F0F0F5;
  --text-muted: #7A7A8A;
  --border: #2A2A35;

  --radius-card: 16px;
  --radius-btn: 12px;

  --size-touch-target: 44px;
  --nav-height: 72px;
  --content-max-width: 720px;
  --border-width: 1px;
  --badge-height: 24px;
  --dot-size: 6px;
  --dot-gap: 2px;
  --modal-max-height: 82dvh;
  --chart-placeholder-height: 220px;
  --popup-width: 220px;
  --popup-mobile-width: 72vw;
  --radius-pill: 999px;
  --overlay-backdrop: rgba(0, 0, 0, 0.62);
  --shadow-popup: 0 12px 32px rgba(0, 0, 0, 0.32);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --letter-spacing-label: 0.08em;

  --transition-base: all 0.2s ease;
}

[data-theme="light"] {
  --bg-primary: #F7F7FA;
  --bg-card: #FFFFFF;
  --bg-elevated: #ECECF2;

  --accent-run: #E84F2B;
  --accent-health: #00A987;
  --accent-warn: #D99A00;

  --text-primary: #141419;
  --text-muted: #6B6B78;
  --border: #DADAE3;
}