:root {
  --color-bg: #F2F2F7;
  --color-card: #FFFFFF;
  --color-primary: #007AFF;
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-danger: #FF3B30;
  --color-text: #1C1C1E;
  --color-text-secondary: #8E8E93;
  --color-text-tertiary: #AEAEB2;
  --color-separator: #C6C6C8;
  --color-fill: #E5E5EA;

  --color-stefan: #007AFF;
  --color-kerstin: #FF2D55;

  --color-spring: #34C759;
  --color-summer: #FF9500;
  --color-autumn: #FF6B35;
  --color-winter: #5AC8FA;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);

  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-xxl: 28px;
  --font-size-title: 34px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-height: 56px;
  --tabbar-height: 84px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-card: #1C1C1E;
    --color-text: #FFFFFF;
    --color-text-secondary: #98989D;
    --color-text-tertiary: #636366;
    --color-separator: #38383A;
    --color-fill: #2C2C2E;
  }
}