:root {
  /* Primitive Colors */
  --gray-50: #f2f2f7;
  --gray-100: #e5e5ea;
  --gray-200: #d1d1d6;
  --gray-300: #c7c7cc;
  --gray-400: #aeaeb2;
  --gray-500: #8e8e93;
  --gray-600: #636366;
  --gray-700: #48484a;
  --gray-800: #3a3a3c;
  --gray-900: #1c1c1e;
  --black: #000000;
  --white: #ffffff;
  
  --blue-500: #007aff;
  --green-500: #34c759;
  --red-500: #ff3b30;
  --orange-500: #ff9500;

  /* Semantic Colors - Light Mode */
  --bg: var(--gray-50);
  --surface: var(--white);
  --surface-elevated: rgba(255, 255, 255, 0.55);
  --surface-elevated-solid: var(--white);
  --text: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-400);
  --separator: rgba(60, 60, 67, 0.2);
  --separator-opaque: var(--gray-200);
  --segment-track: rgba(118, 118, 128, 0.12);
  --segment-slider: var(--white);
  --accent: var(--blue-500);
  --accent-light: rgba(0, 122, 255, 0.12);
  --success: var(--green-500);
  --danger: var(--red-500);
  --warning: var(--orange-500);
  
  /* Status Palette */
  --status-arriving: var(--green-500);
  --status-en-route: var(--warning);
  --status-delayed: var(--danger);
  --status-offline: var(--gray-500);

  /* Typography Scale */
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 15px;
  --font-lg: 17px;
  --font-xl: 19px;
  --font-2xl: 32px;
  
  --tracking-tight: -1px;
  --tracking-normal: -0.2px;
  --tracking-loose: 0.2px;

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

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-glow: none;
  
  /* Motion */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1.15);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Semantic Colors - Dark Mode */
    --bg: var(--black);
    --surface: var(--gray-900);
    --surface-elevated: rgba(28, 28, 30, 0.55);
    --surface-elevated-solid: var(--gray-800);
    --text: var(--white);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-500);
    --separator: rgba(84, 84, 88, 0.4);
    --separator-opaque: var(--gray-700);
    --segment-track: rgba(118, 118, 128, 0.24);
    --segment-slider: var(--gray-700);
    --accent: #0a84ff;
    --accent-light: rgba(10, 132, 255, 0.2);
  }
}