/* CSS Variables & Design System Tokens */
:root {
  /* Colors */
  --color-primary: #004B87;
  --color-primary-hover: #003663;
  --color-primary-light: #e6f0fa;
  --color-secondary: #64748B;
  --color-secondary-hover: #475569;
  --color-secondary-light: #f1f5f9;
  
  --color-dark: #0f172a;
  --color-dark-surface: #0a192f;
  --color-light-bg: #f8fafc;
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-white: #ffffff;
  --color-black: #000000;
  
  --color-success: #10b981;
  --color-accent: #0284c7;

  /* Typography */
  --font-heading: "Arial";
  --font-body: "Arial";
  
  /* Layout Spacing */
  --container-max-width: 1600px;
  --gutter-desktop: 3vw;
  --gutter-mobile: 5vw;
  --header-height: 80px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px -5px rgba(0,75,135,0.12), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 35px -10px rgba(0,75,135,0.18);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Z-Index Hierarchy */
  --z-back: -1;
  --z-normal: 1;
  --z-sticky: 100;
  --z-header: 1000;
  --z-floating: 2000;
  --z-drawer: 3000;
  --z-modal: 4000;
}