/*
  Design tokens — the single place that defines the site's palette, type scale,
  spacing scale and other reusable values. Change a value here and it updates
  everywhere it's used.
*/

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}

:root {
  /* Color — sampled and refined from the club's existing navy/blue brand palette */
  --color-navy: #002766;
  --color-navy-dark: #001a45;
  --color-accent: #0454a4;
  --color-accent-dark: #033c78;
  --color-white: #ffffff;
  --color-ink: #1b2733;
  --color-ink-soft: #46525e;
  --color-border: #dde3ea;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f6f9;
  --color-yellow: #f5c518;

  /* Typography — a single family used throughout; kept as two tokens
     (rather than one) since headings/body are still styled independently
     elsewhere (weight, size, color), and other code may still assume both
     tokens exist. */
  --font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale: clamp(min, preferred, max) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 1.95rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.85rem + 2.2vw, 3.4rem);
  --step-5: clamp(2.7rem, 1.9rem + 4vw, 4.4rem);

  /* Desktop top-level menu: 0.9rem at the 1280px hamburger breakpoint (the
     tightest fit), growing to 1.05rem by ~1600px where there's spare room. */
  --nav-font: clamp(0.9rem, 0.3rem + 0.75vw, 1.05rem);

  /* Spacing scale (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --content-width: 75rem;
  --prose-width: 68ch;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(0, 20, 50, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 20, 50, 0.12);

  --header-height: 4.5rem;

  /* Head image/video height cap (components.css, .page-media--head): at
     most this fraction of the window height left once the menu bar and
     the page title strip are taken off. The title strip's height varies
     (subtitles, titles that wrap), so its allowance is an estimate; a
     one-line title in the compact strip is about 6rem. */
  --head-image-fit: 0.9;
  --head-image-title-allowance: 6rem;
}