:root {
  --color-ink: #102033;
  --color-navy: #17458f;
  --color-bay: #0067c8;
  --color-blue: #d7e8fa;
  --color-blue-soft: #eef5fd;
  --color-amber: #f7a81b;
  --color-coral: #0067c8;
  --color-cream: #fff8e8;
  --color-gold: #f7a81b;
  --color-white: #ffffff;
  --color-mist: #f4f8fd;
  --color-asphalt: #102033;
  --color-sage: #7aa7a3;
  --color-line: rgba(16, 32, 51, 0.14);

  --shadow-soft: 0 18px 60px rgba(16, 32, 51, 0.1);
  --shadow-card: 0 12px 30px rgba(16, 32, 51, 0.08);
  --shadow-tight: 0 8px 20px rgba(16, 32, 51, 0.1);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;

  --container: 1120px;
  --section-y: 4.75rem;
  --gutter: 1.25rem;

  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 760px) {
  :root {
    --section-y: 5.75rem;
    --gutter: 1.5rem;
  }
}

@media (min-width: 1120px) {
  :root {
    --section-y: 7.25rem;
  }
}