/* ==========================================================================
   Strike Padel — design tokens
   Mirrors the design system's tokens/ directory (fonts, colors, typography,
   spacing). Token names match 1:1, so a change in the design system maps
   straight across. Only the four faces this page actually renders are
   declared, converted from the supplied OTF/TTF to WOFF2.
   ========================================================================== */

/* --- tokens/fonts.css ----------------------------------------------------
   Headings/display: Helvetica Now Text Black Italic (900, italic)
   Sign-me-up CTA:   Helvetica Now Text Black (900, upright)
   Body copy:        Helvetica Now Display Regular (400)
   Labels/eyebrows:  Helvetica Now Display Condensed Bold (700)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('../assets/fonts/HelveticaNowText-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('../assets/fonts/HelveticaNowText-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../assets/fonts/HelveticaNowDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display Condensed';
  src: url('../assets/fonts/HelveticaNowDisplay-CnBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- tokens/colors.css ------------------------------------------------- */
  --black: #000000;
  --white: #ffffff;
  --green: #2ae04d;
  --green-dim: #1c9c37;
  --purple: #690f91;
  --navy: #103c89;
  --gray-950: #0a0a0a;
  --gray-900: #141414;
  --gray-800: #1f1f1f;
  --gray-600: #4d4d4d;
  --gray-400: #8a8a8a;
  --gray-200: #d4d4d4;
  --gray-100: #ececec;

  --surface-primary: var(--black);
  --surface-inverse: var(--white);
  --surface-raised: var(--gray-900);
  --surface-border: var(--gray-800);

  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--gray-400);
  --text-on-light: var(--black);
  --text-on-light-muted: var(--gray-600);

  --accent-primary: var(--green);
  --accent-purple: var(--purple);
  --accent-navy: var(--navy);

  --focus-ring: var(--green);

  /* --- tokens/typography.css --------------------------------------------- */
  --font-display: 'Helvetica Now Text', Arial, sans-serif;
  --font-body: 'Helvetica Now Display', Arial, sans-serif;
  --font-label: 'Helvetica Now Display Condensed', 'Helvetica Now Display', Arial, sans-serif;
  --font-style-display: italic;

  --fw-display: 900;
  --fw-heading: 800;
  --fw-body: 400;
  --fw-body-medium: 600;

  --fs-display-xl: clamp(48px, 7vw, 120px);
  --fs-display-l: clamp(36px, 5vw, 72px);
  --fs-display-m: clamp(28px, 3.5vw, 48px);
  --fs-heading-l: 32px;
  --fs-heading-m: 24px;
  --fs-body-l: 19px;
  --fs-body-m: 16px;
  --fs-body-s: 14px;
  --fs-label: 13px;

  --lh-tight: 0.95;
  --lh-heading: 1.1;
  --lh-body: 1.55;

  --ls-display: -0.01em;
  --ls-label: 0.18em;

  /* --- tokens/spacing.css ------------------------------------------------- */
  --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;

  --radius-s: 2px;
  --radius-m: 4px;
  --radius-pill: 999px;

  --container-max: 1280px;
  --border-thin: 1px;
  --border-thick: 2px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}