:root {
  --ios-bg: #F2F2F7;
  --ios-card: #FFFFFF;
  --ios-primary: #007AFF;
  --ios-secondary: #8E8E93;
  --ios-tertiary: #C7C7CC;
  --ios-separator: #C6C6C8;
  --ios-red: #FF3B30;
  --ios-green: #34C759;
  --ios-orange: #FF9500;
  --ios-yellow: #FFCC00;
  --text-primary: #000000;
  --text-secondary: #3C3C43;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ios-bg: #000000;
    --ios-card: #1C1C1E;
    --ios-primary: #0A84FF;
    --ios-secondary: #8E8E93;
    --ios-tertiary: #48484A;
    --ios-separator: #38383A;
    --ios-red: #FF453A;
    --ios-green: #30D158;
    --ios-orange: #FF9F0A;
    --text-primary: #FFFFFF;
    --text-secondary: #EBEBF5;
  }
}

body {
  background: var(--ios-bg);
  color: var(--text-primary);
}