@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  /* ─── Fonts ─────────────────────────────────────────── */
  --font-primary: "Montserrat", sans-serif;

  /* ─── Font weights ───────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ─── Line heights ───────────────────────────────────── */
  --lh-tight: 1.2;
  --lh-base: 1.3;

  /* ─── Font sizes · 1440 (default) ───────────────────── */
  --fs-h1: 46px;
  --fs-h2: 40px;
  --fs-h3: 30px;
  --fs-h4: 24px;
  --fs-body-lg: 20px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  /* ─── Colors ─────────────────────────────────────────── */
  --color-orange: #ff9d00;
  --color-orange-hover: #ffac28;
  --color-white: #fefeff;
  --color-black: #222222;
  --color-grey: #f7f8f9;
  --color-blue: #2a8bea;
  --color-blue-dark: #1e3a8a;

  /* ─── Semantic colors ────────────────────────────────── */
  --color-text: var(--color-black);
  --color-bg: var(--color-white);
  --color-accent: var(--color-orange);

  /* ─── Section spacing ────────────────────────────────── */
  --sec-mt: 130px;
}

/* ─── 1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 30px;
    --fs-h3: 26px;
    --fs-h4: 20px;
    --fs-body-lg: 16px;
    --fs-body: 16px;
    --fs-body-sm: 14px;
    --fs-caption: 9px;
  }
}

/* ─── 480px ──────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 20px;
  }
}

/* ─── 360px ──────────────────────────────────────────── */
@media (max-width: 360px) {
  :root {
    --fs-h1: 24px;
    --fs-h2: 22px;
    --fs-h3: 18px;
  }
}