:root {
  --background: #F7FAFC;
  --foreground: #172033;
  --card: #FFFFFF;
  --card-foreground: #172033;
  --popover: #FFFFFF;
  --popover-foreground: #172033;
  --primary: #0B1530;
  --primary-foreground: #FFFFFF;
  --secondary: #EBF2F7;
  --secondary-foreground: #0B1530;
  --muted: #E2E8F0;
  --muted-foreground: #5A6A85;
  --accent: #087F8C;
  --accent-foreground: #FFFFFF;
  --accent-light: #E6F5F7;
  --destructive: #D32F2F;
  --destructive-foreground: #FFFFFF;
  --border: #DDE5ED;
  --input: #DDE5ED;
  --input-focus: #087F8C;
  --ring: #087F8C;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --navy-dark: #070E20;
  --navy: #0B1530;
  --navy-light: #152244;
  --teal: #087F8C;
  --teal-hover: #066974;
  --teal-subtle: rgba(8, 127, 140, 0.12);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow-sm: 0 1px 2px rgba(11, 21, 48, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(11, 21, 48, 0.08), 0 2px 4px -1px rgba(11, 21, 48, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(11, 21, 48, 0.1), 0 4px 6px -2px rgba(11, 21, 48, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(11, 21, 48, 0.12), 0 10px 10px -5px rgba(11, 21, 48, 0.04);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
  --safe-left: max(12px, env(safe-area-inset-left));
  --safe-right: max(12px, env(safe-area-inset-right));
}