/* We All Hoop - brand tokens (brand: "custom", this file IS the brand).
   Built from the logo: Carolina blue #4B9CD3 hex crest with a white ball, set on the deep
   navy the academy already uses on its Instagram flyers. Fonts are self-hosted (no Google CDN). */
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --blue: #4b9cd3;        /* logo */
  --blue-hi: #8cc4ec;     /* ice, highlights on dark */
  --blue-deep: #22679b;   /* text-safe blue on light */
  --ink: #060d18;         /* deepest background */
  --navy: #0b1627;
  --navy-2: #12223a;
  --paper: #f4f8fb;
  --paper-2: #e6eff7;
  --white: #ffffff;
  --text: #0b1627;
  --text-soft: #3f5165;
  --on-dark: #eaf2f9;
  --on-dark-soft: #b4c4d5;
  --line-dark: rgba(140, 196, 236, 0.14);
  --line-light: rgba(11, 22, 39, 0.1);

  /* TWO families only. Display = Big Shoulders (closest to the logo's tall squared letters), used
     uppercase for h1/h2, numbers and the marquee. Text = Manrope for h3 down, UI, buttons and body. */
  --f-display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --f-body: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* type scale (about 1.25 steps). Use these, never ad-hoc sizes. Nothing below --fs-xs. */
  --fs-hero: clamp(3.4rem, min(8.6vw, 11.4vh), 7.4rem);
  --fs-h2: clamp(2.7rem, 5.4vw, 4.6rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.45rem);
  --fs-lead: clamp(1.08rem, 1.25vw, 1.2rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 30px 70px -30px rgba(6, 13, 24, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}