@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local("Arial");
  size-adjust: 105.4%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-500.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.64%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --sand: #F3EEE4;
  --paper: #FBF8F2;
  --sand-deep: #E6DECE;
  --ink: #14181D;
  --ink-soft: #4A5058;
  --court: #1B3FA8;
  --court-deep: #12297A;
  --ball: #C9E83A;
  --ok: #2E7D5B;
  --warn: #B4542A;
  --screen-bg: #0B0E13;
  --screen-fg: #F3EEE4;

  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", system-ui, sans-serif;
  --font-text: Inter, "Inter Fallback", system-ui, sans-serif;

  --text-base: 1.0625rem;
  --lh-text: 1.6;
  --h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --h3: 1.25rem;
  --eyebrow: 0.8125rem;
  --stat: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --caption: 0.875rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --wrap: 1120px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 8vw, 7rem);
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-illu: 16px;
  --measure: 66ch;
  --measure-h: 22ch;
}

[data-theme="display"] {
  --sand: #0B0E13;
  --paper: #14181D;
  --sand-deep: #2A313A;
  --ink: #F3EEE4;
  --ink-soft: #C5C0B6;
  --court: #8BA3F0;
  --court-deep: #B4C3F5;
  --screen-bg: #0B0E13;
  --screen-fg: #F3EEE4;
}