/* 100 Meilen Mauerlauf Berlin 2026 - Design tokens */
:root {
  --ml-bg-950: #05070a;
  --ml-bg-900: #080b10;
  --ml-surface-900: #0e141c;
  --ml-surface-850: #121a24;
  --ml-surface-800: #172231;
  --ml-surface-760: #1c2a3b;
  --ml-surface-700: #223247;

  --ml-line-800: #243244;
  --ml-line-700: #324254;
  --ml-focus: #ffb000;

  --ml-text-100: #f6f8fa;
  --ml-text-200: #e8edf3;
  --ml-text-400: #a8b2c1;
  --ml-text-500: #788495;
  --ml-text-inverse: #080b10;

  --ml-lime-400: #d7ff00;
  --ml-lime-500: #bfff00;
  --ml-cyan-400: #19d8ff;
  --ml-success-400: #35f27e;
  --ml-success-dark-500: #0fbf75;
  --ml-warning-400: #ffd400;
  --ml-danger-400: #ff3864;
  --ml-danger-700: #84111c;

  --ml-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.26);
  --ml-shadow-elevated: 0 18px 60px rgba(0, 0, 0, 0.45);
  --ml-glow-lime: 0 0 26px rgba(215, 255, 0, 0.32);
  --ml-glow-focus: 0 0 0 3px rgba(255, 176, 0, 0.16), 0 0 22px rgba(255, 176, 0, 0.18);

  --ml-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ml-font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;

  --ml-space-1: 4px;
  --ml-space-2: 8px;
  --ml-space-3: 12px;
  --ml-space-4: 16px;
  --ml-space-5: 20px;
  --ml-space-6: 24px;
  --ml-space-8: 32px;

  --ml-radius-sm: 12px;
  --ml-radius-md: 16px;
  --ml-radius-lg: 22px;
  --ml-radius-xl: 28px;
  --ml-radius-pill: 999px;

  --ml-topbar-height: 74px;
  --ml-bottomnav-height: 72px;
  --ml-touch-target: 48px;
  --ml-input-height: 52px;
  --ml-button-height: 56px;

  /* Legacy aliases kept for the existing page styles and JS status classes. */
  --bg: var(--ml-bg-950);
  --surface: var(--ml-surface-800);
  --surface-2: var(--ml-surface-900);
  --fg: var(--ml-text-100);
  --muted: var(--ml-text-400);
  --line: var(--ml-line-800);
  --status-darkgreen: var(--ml-success-dark-500);
  --status-green: var(--ml-lime-400);
  --status-yellow: var(--ml-warning-400);
  --status-red: var(--ml-danger-400);
  --status-darkred: var(--ml-danger-700);
  --btn-primary: var(--ml-lime-400);
  --btn-primary-hover: var(--ml-lime-500);
  --btn-danger: var(--ml-danger-400);
  --btn-danger-hover: #ff5f7d;
  --focus-ring: var(--ml-focus);
  --focus-ring-shadow: rgba(255, 176, 0, 0.24);
}