/* ============================================
   Knight Investment Group - Design Tokens
   ============================================ */

:root {
  /* --- Colors --- */
  --color-navy:          #022B67;
  --color-navy-mid:      #011E4A;
  --color-navy-light:    #1A3F7A;

  --color-accent:        #467FD4;
  --color-accent-light:  #5B92E5;
  --color-accent-dark:   #3568B5;
  --color-accent-muted:  #E6EDF8;

  --color-cream:         #F8F7F4;
  --color-white:         #FFFFFF;
  --color-charcoal:      #2C3E50;
  --color-gray-dark:     #4A5568;
  --color-gray-mid:      #A0AEC0;
  --color-gray-light:    #E2E8F0;
  --color-gray-pale:     #F1F0ED;

  /* --- Typography --- */
  --font-display:        'Libre Baskerville', 'Georgia', serif;
  --font-body:           'Inter', 'system-ui', -apple-system, sans-serif;

  --text-xs:             0.75rem;
  --text-sm:             0.875rem;
  --text-base:           1rem;
  --text-lg:             1.125rem;
  --text-xl:             1.25rem;
  --text-2xl:            1.5rem;
  --text-3xl:            1.875rem;
  --text-4xl:            2.25rem;
  --text-5xl:            3rem;
  --text-6xl:            3.75rem;

  --leading-tight:       1.25;
  --leading-snug:        1.4;
  --leading-normal:      1.6;
  --leading-relaxed:     1.75;

  --tracking-tight:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.05em;
  --tracking-wider:      0.08em;

  --weight-normal:       400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* --- Spacing --- */
  --space-xs:            0.5rem;
  --space-sm:            1rem;
  --space-md:            1.5rem;
  --space-lg:            2rem;
  --space-xl:            3rem;
  --space-2xl:           4rem;
  --space-3xl:           6rem;
  --space-4xl:           8rem;

  /* --- Layout --- */
  --container-max:       1200px;
  --container-narrow:    800px;
  --container-wide:      1400px;
  --container-padding:   1.5rem;
  --nav-height:          80px;

  /* --- Borders & Radius --- */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;

  /* --- Shadows --- */
  --shadow-sm:           0 1px 3px rgba(2, 43, 103, 0.08);
  --shadow-md:           0 4px 12px rgba(2, 43, 103, 0.1);
  --shadow-lg:           0 8px 30px rgba(2, 43, 103, 0.12);
  --shadow-nav:          0 1px 8px rgba(2, 43, 103, 0.06);

  /* --- Transitions --- */
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
  --transition-slow:     400ms ease;
}