/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --clr-primary:        #0f2d4a;
  --clr-primary-mid:    #1a4a6e;
  --clr-primary-light:  #2a6496;
  --clr-accent:         #f0a500;
  --clr-accent-dark:    #d48e00;
  --clr-white:          #ffffff;
  --clr-off:            #f7f8fa;
  --clr-border:         #e2e6ea;
  --clr-subtle:         #edf1f5;
  --clr-text:           #1a1a2e;
  --clr-text-mid:       #4a5568;
  --clr-text-light:     #718096;
  --clr-footer-bg:      #0a1e30;
  --clr-footer-text:    #94a8b8;
  --font: 'Inter', 'Segoe UI', sans-serif;
  --sz-xs:   clamp(10px, 1.5vw, 11px);
  --sz-sm:   clamp(12px, 1.8vw, 13px);
  --sz-base: clamp(14px, 2vw,   15px);
  --sz-md:   clamp(15px, 2.2vw, 17px);
  --sz-lg:   clamp(17px, 2.5vw, 20px);
  --sz-xl:   clamp(20px, 3vw,   26px);
  --sz-2xl:  clamp(24px, 4vw,   32px);
  --sz-3xl:  clamp(28px, 5.5vw, 42px);
  --lh-tight:   1.15;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;
  --max-w:      1160px;
  --gap:        clamp(16px, 3vw, 24px);
  --radius:     6px;
  --radius-lg:  12px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:48px;
  --s9:64px; --s10:80px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --transition:       0.3s ease-in-out;
  --transition-fast:  0.18s ease-in-out;
  --transition-slow:  0.45s ease-in-out;
  --z-nav:   1000;
  --z-modal: 2000;
}