/* =========================================================
   CrossFit Fortius — design tokens
   Source: Figma collection `fortius`, mode "V1 Blue" (the only mode we use).
   Breakpoints: desktop > 1024 / tablet 601–1024 / mobile <= 600
   ========================================================= */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/poppins-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }

:root {
  /* ---------- Color ---------- */
  --brand-blue: #135CA9;
  --brand-blue-700: #0E4884;
  --brand-blue-50: #E8F0F9;
  --brand-sky: #8FDAED;
  --brand-sky-light: #B2E5EF;
  --brand-sky-dark: #5DCEE8;
  --brand-cta: #E59431;        /* all buttons */
  --brand-cta-hover: #C97A1F;
  --surface-navy: #000B27;
  --surface-navy-800: #0D1B3D;
  --surface-paper: #FAFAFA;
  --surface-white: #FFFFFF;
  --neutral-line: #E4E5EA;
  --neutral-black: #000000;    /* button label + arrow ring */
  --text-ink: #111418;
  --text-body: #3D4450;
  --text-muted: #6B7280;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #C9D3E6;

  /* ---------- Font stacks ---------- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Type scale (desktop) ---------- */
  --fs-display: 80px;  --lh-display: 84px;
  --fs-h1: 56px;       --lh-h1: 62px;
  --fs-h2: 44px;       --lh-h2: 52px;
  --fs-h3: 28px;       --lh-h3: 36px;
  --fs-h4: 20px;       --lh-h4: 28px;
  --fs-body-l: 20px;   --lh-body-l: 32px;
  --fs-body: 17px;     --lh-body: 28px;
  --fs-body-s: 15px;   --lh-body-s: 24px;
  --fs-label: 13px;    --lh-label: 16px;
  --fs-button: 16px;   --lh-button: 20px;
  --fs-numeral: 56px;  --lh-numeral: 56px;

  /* ---------- Radii ---------- */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-panel: 32px;
  --radius-image: 16px;

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 80px; --space-10: 120px;

  /* ---------- Layout ---------- */
  --gutter: 120px;
  --section-pad: 120px;
  --content-width: 1200px;
}

@media (max-width: 1024px) {
  :root {
    --fs-display: 64px;  --lh-display: 68px;
    --fs-h1: 48px;       --lh-h1: 54px;
    --fs-h2: 40px;       --lh-h2: 46px;
    --fs-h3: 26px;       --lh-h3: 32px;
    --fs-body-l: 19px;   --lh-body-l: 30px;
    --gutter: 40px;
    --section-pad: 80px;
  }
}

@media (max-width: 600px) {
  :root {
    --fs-display: 44px;  --lh-display: 48px;
    --fs-h1: 36px;       --lh-h1: 42px;
    --fs-h2: 30px;       --lh-h2: 36px;
    --fs-h3: 22px;       --lh-h3: 28px;
    --fs-h4: 18px;       --lh-h4: 26px;
    --fs-body-l: 18px;   --lh-body-l: 28px;
    --fs-body: 16px;     --lh-body: 26px;
    --fs-body-s: 14px;   --lh-body-s: 22px;
    --fs-label: 12px;    --lh-label: 16px;
    --fs-numeral: 44px;  --lh-numeral: 44px;
    --gutter: 20px;
    --section-pad: 56px;
  }
}