@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
  --color-page: #f4fafe;
  --color-navy: #050642;
  --color-blue: #0062fd;
  --color-blue-secondary: #1749a6;
  --color-blue-light: #5c7eb5;
  --color-muted: #647da8;
  --color-border: #d9e8f5;
  --color-border-strong: #c8ddf0;
  --color-divider: #e5eff8;
  --color-surface: #fff;
  --color-surface-soft: #fbfdfe;
  --color-tint: #f2f9fe;
  --color-tint-strong: #eaf5fd;
  --font-primary: "InterVariable", Arial, sans-serif;
  --content-max: 1280px;
  --page-gutter: 48px;
  --panel-radius: 16px;
  --media-radius: 10px;
  --button-radius: 10px;
  --shadow-card: 0 2px 12px rgb(20 73 122 / 8%);
  --shadow-elevated: 0 8px 24px rgb(20 58 96 / 12%);
  --shadow-button: 0 4px 10px rgb(0 98 253 / 18%);
  --motion-fast: 160ms;
  --motion-normal: 220ms;
  --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --motion-arrow-shift: 3px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
}

@media (max-width: 767px) {
  :root {
    --page-gutter: 14px;
    --panel-radius: 10px;
    --media-radius: 7px;
    --button-radius: 7px;
  }
}