/* === Design Tokens: CSS Custom Properties === */

:root {
  /* === COLORS === */
  --color-primary:        #143566;
  --color-primary-dark:   #112D57;
  --color-secondary:      #ED1B23;
  --color-accent:         #ED1B23;
  --color-bg:             #FFFFFF;
  --color-surface:        #F4F4F4;
  --color-surface-alt:    #EEF2F8;
  --color-text-primary:   #143566;
  --color-text-secondary: #ED1B23;
  --color-text-muted:     #6B7A99;
  --color-text-on-dark:   #FFFFFF;
  --color-border:         #CCCCCC;
  --color-border-light:   #E8E8E8;
  --color-success:        #46A758;
  --color-error:          #E24B4A;
  --color-warning:        #F59E0B;

  /* === TYPOGRAPHY === */
  --font-display: 'Ubuntu', sans-serif;
  --font-heading: 'Ubuntu', sans-serif;
  --font-body:    'Noto Sans', sans-serif;
  --font-ui:      'Noto Sans', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* === SPACING (multiples of 8) === */
  --space-0:  4px;
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  56px;
  --space-8:  64px;
  --space-9:  72px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* === BORDER RADIUS === */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 40px;
  --radius-circle: 50%;

  /* === SHADOWS === */
  --shadow-sm:  0 1px 3px rgba(20, 53, 102, 0.08),
                0 1px 2px rgba(20, 53, 102, 0.06);
  --shadow-md:  0 4px 12px rgba(20, 53, 102, 0.12),
                0 2px 6px rgba(20, 53, 102, 0.08);
  --shadow-lg:  0 10px 30px rgba(20, 53, 102, 0.16),
                0 4px 12px rgba(20, 53, 102, 0.10);
  --shadow-xl:  0 20px 48px rgba(20, 53, 102, 0.20),
                0 8px 20px rgba(20, 53, 102, 0.12);

  /* === TRANSITIONS === */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;

  /* === LAYOUT === */
  --container-max:     1200px;
  --container-padding: 24px;
  --header-height:     72px;

  /* === Z-INDEX SCALE === */
  --z-base:    1;
  --z-dropdown: 100;
  --z-header:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-top:     999;
}