/* ===== Self-hosted fonts ===== */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satisfy';
  src: url('../fonts/satisfy.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Design tokens ===== */
:root {
  /* Fonts */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-signature: 'Satisfy', cursive;
  --font-body: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Switzer', 'Helvetica Neue', Arial, sans-serif;

  /* Colors — dark navy/charcoal family, monochrome + photography */
  --color-void: #050411;
  --color-deep: #04030f;
  --color-navy: #101321;
  --color-navy-alt: #13131f;
  --color-navy-mid: #14143a;
  --color-accent: #abd3ff;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-error: #e08a8a;

  --overlay-30: rgba(0, 0, 0, 0.3);
  --overlay-35: rgba(0, 0, 0, 0.35);
  --overlay-45: rgba(0, 0, 0, 0.45);
  --overlay-60: rgba(0, 0, 0, 0.6);
  --overlay-65: rgba(0, 0, 0, 0.65);

  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.75);
  --text-on-dark-faint: rgba(255, 255, 255, 0.5);
  --text-on-dark-fainter: rgba(255, 255, 255, 0.4);
  --border-on-dark: rgba(255, 255, 255, 0.1);
  --border-on-dark-strong: rgba(255, 255, 255, 0.25);

  /* Spacing scale (rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6.25rem;

  /* Fluid section rhythm */
  --section-py: clamp(3.5rem, 3rem + 4vw, 6.25rem);
  --section-px: clamp(1.25rem, 1rem + 3vw, 2rem);
  --content-max: 86rem; /* 1376px */
  --content-narrow: 52rem; /* 832px */

  /* Type scale */
  --text-xs: 0.9375rem;
  --text-sm: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 1.75rem;
  --text-2xl: 2rem;

  /* Long-form body copy: 17px on phones rising to 19px on desktop, kept small next to the large display headlines. */
  --text-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);

  /* Lead: one step above body (about 1.2x) for a section's introductory text. A single lead size, used sparingly:
     body for reading, lead for the opening statement. */
  --text-lead: clamp(1.25rem, 1.1rem + 0.45vw, 1.4375rem);

  /* Eyebrow label: stays on one line on phones, reaches 16px on larger screens. */
  --text-eyebrow: clamp(0.8125rem, 0.55rem + 1.1vw, 1rem);

  /* Hierarchy stays strictly descending at every width: hero > section heading > card title > team title > team name. */
  --text-card-title: clamp(1.375rem, 1.1rem + 1vw, 2.125rem);
  --text-heading: clamp(1.75rem, 1.2rem + 2.4vw, 3.625rem);
  --text-team-title: clamp(1.3125rem, 1.05rem + 1.1vw, 2rem);
  --text-team-name: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);

  /* Case for navigation links and buttons. `none` = sentence case.
     To bring the all-caps look back, change this one value to `uppercase`. */
  --ui-text-transform: none;
  --text-hero: clamp(2.25rem, 1.3rem + 4vw, 4rem);
  --text-quote: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  --text-signature: clamp(2.75rem, 1.5rem + 6vw, 6rem);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-nav: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 300ms;
  --duration-slow: 700ms;
  --duration-nav: 420ms;

  /* One motion language: hover, focus and state changes ease over 180ms; things appearing ease over 300ms. */
  --motion-state: var(--duration-fast) var(--ease-standard);
  --motion-enter: var(--duration-base) var(--ease-standard);

  --radius-pill: 999px;
  --radius-sm: 4px;
  --radius-md: 10px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-nav: 0ms;
  }
}