:root {
  /* Brand Colors */
  --color-navy: #0A1F44;
  --color-blue: #5A9DFF;
  --color-white: #FFFFFF;
  
  /* Neutral Grays */
  --color-gray-50: #F7F8FA;
  --color-gray-100: #F0F2F5;
  --color-gray-200: #E4E7EC;
  --color-gray-300: #D0D5DD;
  --color-gray-400: #98A2B3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-900: #1C1F26;
  
  /* Status Colors */
  --color-success: #027A48;
  --color-warning: #F79009;
  --color-error: #D92D20;
  
  /* Blueprint tint */
  --color-blueprint: rgba(10, 31, 68, 0.05);
  
  /* Spacing Scale (4px base) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  
  /* Type Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(10, 31, 68, 0.1), 0 2px 4px -1px rgba(10, 31, 68, 0.06);
}