/* High Five Fit Club Design System — generated from tokens.json */
:root, [data-theme="dark"] {
  --ink-1000: #000000;
  --ink-950: #151515;
  --ink-900: #161616;
  --ink-880: #1b1b1b;
  --ink-850: #262626;
  --ink-800: #303030;
  --ink-700: #4c4c4c;
  --ink-650: #575757;
  --ink-600: #5e5e5e;
  --ink-550: #757575;
  --ink-500: #7f8080;
  --ink-450: #919191;
  --ink-400: #a4a4a4;
  --ink-350: #ababab;
  --ink-300: #bfbfbf;
  --ink-250: #c6c6c6;
  --ink-150: #e2e2e2;
  --ink-100: #f6f6f6;
  --ink-050: #f7f7f7;
  --ink-000: #ffffff;
  --brand-black: var(--ink-1000);
  --brand-white: var(--ink-000);
  --alpha-rule: rgba(76,76,76,0.5);
  --alpha-scrim: rgba(0,0,0,0.24);
  --alpha-scrim-strong: rgba(0,0,0,0.55);
  --alpha-clear: rgba(0,0,0,0);
  --surface-page: var(--ink-1000);
  --surface-raised: var(--ink-900);
  --surface-inverse: var(--ink-000);
  --text-heading: var(--ink-150);
  --text-body: var(--ink-150);
  --text-muted: var(--ink-400);
  --text-subtle: var(--ink-450);
  --text-bright: var(--ink-050);
  --text-on-dark: var(--ink-000);
  --border-hairline: var(--alpha-rule);
  --border-strong: var(--ink-000);
  --surface-card: var(--ink-000);
  --surface-sunken: var(--ink-100);
  --text-heading-on-light: var(--ink-950);
  --text-body-on-light: var(--ink-1000);
  --text-muted-on-light: var(--ink-650);
  --text-subtle-on-light: var(--ink-550);
  --border-on-light: var(--ink-150);
  --border-input: var(--ink-1000);
  --button-primary-bg: var(--ink-1000);
  --button-primary-fg: var(--ink-000);
  --button-primary-bg-hover: var(--ink-850);
  --button-inverse-bg: var(--ink-000);
  --button-inverse-fg: var(--ink-1000);
  --button-inverse-bg-hover: var(--ink-150);
  --button-outline-fg: var(--ink-000);
  --button-outline-border: var(--ink-000);
  --link-fg: var(--ink-000);
  --link-fg-hover: var(--ink-400);
  --focus-ring: var(--ink-000);
  --shadow-none: none;
  --shadow-popover: 0 2px 8px rgba(0,0,0,0.24);
  --shadow-drawer: 0 0 24px rgba(0,0,0,0.55);
}
[data-theme="light"] {
  --brand-black: var(--ink-1000);
  --brand-white: var(--ink-000);
  --surface-page: var(--ink-000);
  --surface-raised: var(--ink-100);
  --surface-inverse: var(--ink-1000);
  --text-heading: var(--ink-950);
  --text-body: var(--ink-1000);
  --text-muted: var(--ink-650);
  --text-subtle: var(--ink-550);
  --text-bright: var(--ink-1000);
  --text-on-dark: var(--ink-000);
  --border-hairline: var(--ink-150);
  --border-strong: var(--ink-1000);
  --surface-card: var(--ink-000);
  --surface-sunken: var(--ink-100);
  --text-heading-on-light: var(--ink-950);
  --text-body-on-light: var(--ink-1000);
  --text-muted-on-light: var(--ink-650);
  --text-subtle-on-light: var(--ink-550);
  --border-on-light: var(--ink-150);
  --border-input: var(--ink-1000);
  --button-primary-bg: var(--ink-1000);
  --button-primary-fg: var(--ink-000);
  --button-primary-bg-hover: var(--ink-850);
  --button-inverse-bg: var(--ink-000);
  --button-inverse-fg: var(--ink-1000);
  --button-inverse-bg-hover: var(--ink-150);
  --button-outline-fg: var(--ink-000);
  --button-outline-border: var(--ink-000);
  --link-fg: var(--ink-1000);
  --link-fg-hover: var(--ink-650);
  --focus-ring: var(--ink-1000);
}
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --gutter: 24px;
  --row-gap: 48px;
  --section-y: 40px;
  --section-y-md: 80px;
  --section-y-lg: 96px;
  --stack-gap: 16px;
  --card-padding: 24px;
  --nav-padding: 24px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1536px;
  --container-sm: 100%;
  --container-md: 984px;
  --container-lg: 1160px;
  --container-xl: 1280px;
  --header-height: 100px;
  --promo-bar-height: 32px;
  --measure-body: 60ch;
  --border-width: 1px;
  --border-width-thick: 2px;
  --size-hero: 32px;
  --size-hero-md: 38px;
  --size-hero-lg: 44px;
  --size-hero-xl: 48px;
  --size-display: 28px;
  --size-display-md: 30px;
  --size-display-lg: 32px;
  --size-display-xl: 36px;
  --size-title: 22px;
  --size-title-lg: 24px;
  --size-subtitle: 20px;
  --size-subtitle-xl: 23px;
  --size-body: 16px;
  --size-body-xl: 18px;
  --size-small: 14px;
  --size-small-xl: 16px;
  --size-eyebrow: 14px;
  --size-button: 14px;
  --size-nav: 16px;
  --weight-display: 400;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-display: 0.063em;
  --tracking-button: 0.882px;
  --tracking-normal: normal;
  --leading-display: 1.25;
  --leading-heading: 1.3em;
  --leading-body: 1.5;
  --leading-body-px: 24px;
  --leading-flat: 1;
  --font-display: 'Fjalla One', 'Oswald', arial, sans-serif;
  --font-body: 'Source Sans Pro', arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.h5-hero { font-family: var(--font-display); font-size: 44px; line-height: 1.25; font-weight: 400; letter-spacing: 0.063em; }
.h5-display { font-family: var(--font-display); font-size: 32px; line-height: 1.25; font-weight: 400; letter-spacing: 0.063em; }
.h5-title { font-family: var(--font-display); font-size: 22px; line-height: 1.3; font-weight: 400; letter-spacing: 0.063em; }
.h5-subtitle { font-family: var(--font-display); font-size: 20px; line-height: 1.3; font-weight: 400; letter-spacing: 0.063em; }
.h5-eyebrow { font-family: var(--font-display); font-size: 14px; line-height: 1.3; font-weight: 400; letter-spacing: 0.063em; }
.h5-heading { font-family: var(--font-body); font-size: 38px; line-height: 1.3; font-weight: 400; }
.h5-body { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; }
.h5-small { font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 400; }
.h5-nav { font-family: var(--font-body); font-size: 16px; line-height: 1.5; font-weight: 400; }
.h5-button { font-family: var(--font-body); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0.882px; }
@font-face { font-family: 'Fjalla One'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/fjalla-one-400.woff2") format("woff2"); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/source-sans-pro-400.woff2") format("woff2"); }
@font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/source-sans-pro-400-italic.woff2") format("woff2"); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/source-sans-pro-600.woff2") format("woff2"); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/source-sans-pro-700.woff2") format("woff2"); }