/* Design tokens — ported from the Launchpad Baseball Academy design system.
   Type and spacing are fluid: each clamp() uses a rem + vw middle term so
   values still respond to browser zoom / user font-size settings (WCAG 1.4.4),
   which a pure-vw clamp would break. */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ===== Color ===== */
  --color-black: #0B0B0B;
  --color-gold: #B8924E;
  --color-cream: #E7D8BD;
  --color-bone: #D2C2A7;
  --color-charcoal: #2B2B2B;
  --color-white: #FFFFFF;
  --color-gold-dim: #8f7239;
  --color-cream-dim: #cbb896;

  --surface-primary: var(--color-black);
  --surface-secondary: var(--color-charcoal);
  --surface-light: var(--color-cream);
  --surface-panel: var(--color-bone);
  --surface-white: var(--color-white);

  --text-on-dark: var(--color-white);
  --text-on-dark-muted: var(--color-bone);
  --text-on-light: var(--color-black);
  --text-on-light-muted: var(--color-charcoal);

  --accent-gold: var(--color-gold);
  --border-accent: var(--color-gold);
  --border-subtle-dark: rgba(255, 255, 255, 0.12);
  --border-subtle-light: rgba(11, 11, 11, 0.12);
  --border-hairline-dark: rgba(255, 255, 255, 0.18);

  --overlay-dark: rgba(11, 11, 11, 0.65);

  /* ===== Fonts ===== */
  --font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Inter', Arial, sans-serif;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-eyebrow: 0.18em;

  /* ===== Fluid display type (mobile → desktop) =====
     Curves come from the Claude Design responsive export: the vw middle term
     matches it exactly, so at default settings this renders identically to
     the approved design. The min/max bounds are in rem rather than px so the
     type still responds to a user's larger default font size (WCAG 1.4.4) —
     a strict improvement with no visual change at 16px root. */
  --text-hero: clamp(2.875rem, 11vw, 7rem);                /* 46 → 112 */
  --text-page-title: clamp(2.75rem, 11vw, 5.25rem);        /* 44 → 84 */
  --text-display-xl: clamp(2.375rem, 8.5vw, 4rem);         /* 38 → 64 */
  --text-display-lg: clamp(2rem, 7vw, 3.25rem);            /* 32 → 52 */
  --text-display-md: clamp(2.125rem, 7.5vw, 3.5rem);       /* 34 → 56 */
  --text-display-rentals: clamp(2rem, 7vw, 3rem);          /* 32 → 48 */
  --text-display-sm: clamp(2rem, 7vw, 2.75rem);            /* 32 → 44 */
  --text-package: clamp(1.875rem, 7vw, 2.375rem);          /* 30 → 38 */
  --text-panel-price: clamp(2.125rem, 1.92rem + 0.93vw, 2.75rem); /* 34 → 44 */
  --text-quote: clamp(1.875rem, 7vw, 2.5rem);              /* 30 → 40 */

  /* ===== Fluid heading + body type ===== */
  --text-heading-lg: clamp(1.75rem, 6vw, 2.125rem);        /* 28 → 34 */
  --text-heading-md: clamp(1.5rem, 5.5vw, 1.875rem);       /* 24 → 30 */
  --text-heading-sm: clamp(1.125rem, 1.04rem + 0.37vw, 1.375rem); /* 18 → 22 */
  --text-lede: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);          /* 16 → 19 */
  --text-body-lg: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);        /* 16 → 18 */
  --text-body: 1rem;                                              /* 16 */
  --text-body-md: 0.9375rem;                                      /* 15 */
  --text-body-sm: 0.875rem;                                       /* 14 */
  --text-eyebrow: clamp(0.6875rem, 0.66rem + 0.09vw, 0.8125rem);  /* 11 → 13 */
  --text-micro: 0.75rem;                                          /* 12 */

  --leading-tight: 1.02;
  --leading-heading: 1.1;
  --leading-body: 1.55;

  /* ===== Static spacing ===== */
  --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: 96px;
  --space-10: 128px;

  /* ===== Fluid spacing ===== */
  --gutter: clamp(1.125rem, 5vw, 2.5rem);                   /* 18 → 40 */
  --section-y: clamp(3.5rem, 10vw, 6rem);                   /* 56 → 96 */
  --section-y-sm: clamp(2.5rem, 1.9rem + 2.78vw, 4rem);     /* 40 → 64 */
  --panel-pad: clamp(1.5rem, 1.1rem + 1.85vw, 2.25rem);     /* 24 → 36 */
  --split-gap: clamp(2.25rem, 1.2rem + 4.63vw, 4.5rem);     /* 36 → 72 */
  --stack-gap: clamp(1.25rem, 1rem + 1.1vw, 2rem);          /* 20 → 32 */

  --content-max: 1240px;
  --header-h: 84px;

  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;

  --rule-thin: 1px;
  --rule-medium: 2px;
  --rule-thick: 4px;

  --tap-target: 44px;

  --safe-margin-pct: 7%;
}