:root {
  --c-900: #001d47;
  --c-800: #002a60;
  --c-700: #003478;
  --c-600: #004099;
  --c-500: #1a5cb0;
  --c-400: #3373c4;
  --c-300: #6699d9;
  --c-200: #b3ccee;
  --c-100: #dce8f7;
  --c-50:  #f0f5fc;

  --r-xs:  4px;
  --r-sm:  7px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 32px;

  --sh-sm: 0 1px 4px rgba(0,40,100,.06), 0 1px 2px rgba(0,40,100,.04);
  --sh-md: 0 4px 14px rgba(0,40,100,.10), 0 2px 6px rgba(0,40,100,.06);
  --sh-lg: 0 10px 32px rgba(0,40,100,.14), 0 4px 12px rgba(0,40,100,.08);
  --sh-xl: 0 20px 48px rgba(0,40,100,.18);

  --font:   'Barlow', sans-serif;
  --font-c: 'Barlow Condensed', sans-serif;

  --mw: 1280px;
  --px: clamp(1rem, 3vw, 1.75rem);
  --header-h: 70px;
}

@media (max-width: 520px) {
  :root {
    --px: 1rem;
  }
}