:root {

  --color-brand-blue:       #99b9d6;
  --color-brand-black:      #000000;
  --color-brand-navy:       #112237;

  --color-blue-50:   #f0f6fb;
  --color-blue-100:  #ddeaf5;
  --color-blue-200:  #bbd5eb;
  --color-blue-300:  #99b9d6;
  --color-blue-400:  #6f9bbf;
  --color-blue-500:  #4a7da8;
  --color-blue-600:  #366490;
  --color-blue-700:  #284d72;
  --color-blue-800:  #1c3754;
  --color-blue-900:  #112237;

  --color-neutral-0:    #ffffff;
  --color-neutral-50:   #f8f9fa;
  --color-neutral-100:  #f1f3f5;
  --color-neutral-200:  #e9ecef;
  --color-neutral-300:  #dee2e6;
  --color-neutral-400:  #ced4da;
  --color-neutral-500:  #adb5bd;
  --color-neutral-600:  #6c757d;
  --color-neutral-700:  #495057;
  --color-neutral-800:  #343a40;
  --color-neutral-900:  #212529;
  --color-neutral-1000: #000000;

  --color-sage-50:   #f2f7f4;
  --color-sage-100:  #ddeee4;
  --color-sage-200:  #b8d9c5;
  --color-sage-300:  #88bc9e;
  --color-sage-400:  #5a9e7a;
  --color-sage-500:  #3d845f;
  --color-sage-600:  #2e6a4a;
  --color-sage-700:  #235238;
  --color-sage-800:  #193d29;
  --color-sage-900:  #10281a;

  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;

  --color-success:       #3d845f;
  --color-success-light: #ddeee4;
  --color-warning:       #d97706;
  --color-warning-light: #fef3cc;
  --color-error:         #dc2626;
  --color-error-light:   #fee2e2;
  --color-info:          #4a7da8;
  --color-info-light:    #ddeaf5;

  --color-bg-primary:    var(--color-neutral-0);
  --color-bg-secondary:  var(--color-neutral-50);
  --color-bg-tertiary:   var(--color-neutral-100);
  --color-bg-dark:       var(--color-blue-900);
  --color-bg-accent:     var(--color-blue-300);

  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-500);
  --color-text-inverse:   var(--color-neutral-0);
  --color-text-link:      var(--color-blue-600);
  --color-text-link-hover:var(--color-blue-700);

  --color-border-light:  var(--color-neutral-200);
  --color-border-base:   var(--color-neutral-300);
  --color-border-dark:   var(--color-neutral-400);
  --color-border-focus:  var(--color-blue-400);

  --color-cta-bg:        var(--color-blue-900);
  --color-cta-text:      var(--color-neutral-0);
  --color-cta-hover:     var(--color-blue-800);

  --font-heading:  'Plus Jakarta Sans', sans-serif;
  --font-body:     'Plus Jakarta Sans', sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --text-hero:    clamp(2.75rem, 6vw, 5rem);
  --text-h1:      clamp(2.25rem, 5vw, 3.75rem);
  --text-h2:      clamp(1.75rem, 3.5vw, 2.75rem);
  --text-h3:      clamp(1.375rem, 2.5vw, 2rem);
  --text-h4:      clamp(1.125rem, 2vw, 1.5rem);
  --text-h5:      clamp(1rem, 1.5vw, 1.25rem);
  --text-h6:      clamp(0.6875rem, 1vw, 0.8125rem);
  --text-body-lg: clamp(1.0625rem, 1.5vw, 1.25rem);
  --text-body:    clamp(1rem, 1.25vw, 1.125rem);
  --text-small:   clamp(0.8125rem, 1vw, 0.9375rem);
  --text-caption: clamp(0.6875rem, 0.85vw, 0.8125rem);

  --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.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.1em;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-pad: var(--space-6);

  --radius-sm:   4px;
  --radius-base: 6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-navy: 0 4px 14px 0 rgb(17 34 55 / 0.25);

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  --z-sticky:   30;
  --z-overlay:  40;
  --z-modal:    50;
}