/*
 * GENERATED FILE — DO NOT EDIT BY HAND.
 *
 * Source: boosterrh-app/src/theme/index.ts
 * Regenerate: node scripts/generate-tokens.mjs
 *
 * Every page on boosterrh.com should link this and reference the variables
 * rather than writing hex literals. A hex literal in a stylesheet is how the
 * product pages ended up with three different reds and six different greys
 * while the homepage and the app stayed on brand.
 */

:root{
  /* Brand */
  --navy: #1B2A4A;
  --navy-mid: #243558;
  --navy-soft: #2E4168;
  --red: #C8102E;
  --red-dark: #A00C24;
  --red-soft: #FDECEF;
  --white: #FFFFFF;
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --surface-alt: #EDF0F5;
  --text: #1B2A4A;
  --text-muted: #5A6B82;
  --text-faint: #8A98AB;
  --on-navy: #FFFFFF;
  --on-navy-muted: #B7C4DA;
  --border: #DDE3EC;
  --border-strong: #C3CDDC;
  --success: #0F7A46;
  --success-soft: #E5F5ED;
  --warning: #B26A00;
  --warning-soft: #FDF2E2;
  --danger: #C8102E;
  --danger-soft: #FDECEF;
  --info: #1D4ED8;
  --info-soft: #E8EEFD;

  /* Event accents — keyed to events.kind in the app. */
  --kind-game: #C8102E;
  --kind-game-soft: #FDECEF;
  --kind-dance: #7C3AED;
  --kind-dance-soft: #F3EDFE;
  --kind-meeting: #1D4ED8;
  --kind-meeting-soft: #E8EEFD;
  --kind-tournament: #0F7A46;
  --kind-tournament-soft: #E5F5ED;
  --kind-trip: #B26A00;
  --kind-trip-soft: #FDF2E2;
  --kind-fundraiser: #0E7490;
  --kind-fundraiser-soft: #E4F4F8;
  --kind-other: #5A6B82;
  --kind-other-soft: #EEF1F7;

  /* Named aliases the marketing page uses for the same accents. */
  --purple: #7C3AED;
  --purple-soft: #F3EDFE;
  --teal: #0E7490;
  --teal-soft: #E4F4F8;
  --gold: #B26A00;
  --gold-soft: #FDF2E2;

  /* Channel triplets, for rgba() overlays and shadows. */
  --navy-rgb: 27, 42, 74;
  --red-rgb: 200, 16, 46;
  --text-rgb: 27, 42, 74;

  /*
   * Type. The app ships no custom font and neither does the homepage, so
   * the system stack is what two of the three surfaces already use and is
   * therefore the reference. The product pages used Anton for display and
   * Inter for body, which is most of why they read as a different product.
   *
   * This is one decision in one place. To put Anton back everywhere, set
   * --font-display here and add @expo-google-fonts/anton to the app so both
   * surfaces change together — which is the point of it being a token.
   */
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Elevation — matches the app's shadow.card / shadow.raised. */
  --shadow-card: 0 4px 12px rgba(27, 42, 74, 0.07);
  --shadow-raised: 0 8px 20px rgba(27, 42, 74, 0.14);
}