:root {
  color-scheme: light dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --font-body: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;

  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);

  --bg: #0b0f14;
  --surface: #141821;
  --surface-elevated: #1a1f2b;
  --surface-muted: #10141c;
  --text-primary: #f5f7fb;
  --text-secondary: #a3adbf;
  --separator: rgba(245, 247, 251, 0.12);
  --accent: #fc5200;
  --accent-strong: #fc5200;
  --success: #2fb86e;
  --warning: #ff9f0a;
  --danger: #ff3b30;
  --focus: #79a7ff;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f2f7;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #f7f7fb;
    --text-primary: #0b0b12;
    --text-secondary: #5f5f72;
    --separator: rgba(11, 11, 18, 0.12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);
    --accent: #fc5200;
    --accent-strong: #fc5200;
    --focus: #2b6bff;
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #f7f7fb;
  --text-primary: #0b0b12;
  --text-secondary: #5f5f72;
  --separator: rgba(11, 11, 18, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);
  --accent: #fc5200;
  --accent-strong: #fc5200;
  --focus: #2b6bff;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b0f14;
  --surface: #141821;
  --surface-elevated: #1a1f2b;
  --surface-muted: #10141c;
  --text-primary: #f5f7fb;
  --text-secondary: #a3adbf;
  --separator: rgba(245, 247, 251, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  --accent: #fc5200;
  --accent-strong: #fc5200;
  --focus: #79a7ff;
}

:root {
  --bg: #000000;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --surface: #000000;
  --surface-elevated: #000000;
  --surface-muted: #000000;
  --separator: rgba(255, 255, 255, 0.2);
}

.safe-top {
  padding-top: calc(var(--safe-top) + var(--space-4));
}

.safe-bottom {
  padding-bottom: calc(var(--safe-bottom) + var(--space-4));
}