:root {
  --halo-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
  --halo-font-live: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --halo-font-narrow: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Primitive brand colors */
  --halo-black: #000000;
  /* Ink / text — graphite gray. Per Sean, the previous #071826 read too cool;
     ink should feel like graphite. */
  --halo-blue-950: #333333;
  /* Legacy blue-scale aliases now map to the graphite/neutral system. */
  --halo-blue-900: #2a2a2a;
  --halo-blue-800: #404040;
  --halo-blue-100: #e3e3df;
  --halo-blue-50: #f7f7f5;
  --halo-ink: #111;
  --halo-gray-900: var(--halo-blue-950);
  --halo-gray-800: #3f3f3f;
  --halo-gray-700: #4d4d4d;
  --halo-gray-600: #5f5f5f;
  --halo-gray-500: #777777;
  --halo-gray-400: #a6a6a0;
  --halo-gray-300: #d2d2cc;
  --halo-gray-200: #e3e3df;
  --halo-gray-100: #f2f2ef;
  --halo-gray-50: #fbfbf9;
  --halo-white: #ffffff;

  --halo-yellow: #fcd62d;
  --halo-yellow-hover: #e5c229;
  --halo-yellow-active: #d3b31f;
  --halo-yellow-strong: var(--halo-yellow-hover);
  --halo-live-yellow: #ffd700;
  --halo-live-yellow-hover: #ffc700;
  --halo-blue: #2f93f3;
  --halo-blue-hover: #1778d4;
  --halo-success: #15a270;
  --halo-warning: #f59e0b;
  --halo-danger: #dc2626;
  --halo-sale: #b91c1c;

  /* Semantic color roles */
  --halo-color-action-primary: var(--halo-yellow);
  --halo-color-action-primary-hover: var(--halo-yellow-hover);
  --halo-color-action-primary-active: var(--halo-yellow-active);
  --halo-color-action-primary-text: var(--halo-ink);
  --halo-color-action-secondary: var(--halo-ink);
  --halo-color-action-secondary-hover: var(--halo-blue-900);
  --halo-color-action-secondary-text: var(--halo-white);
  --halo-color-action-tertiary: transparent;
  --halo-color-action-disabled: #deded9;
  --halo-color-action-disabled-text: #777777;

  --halo-color-link: var(--halo-blue);
  --halo-color-link-hover: var(--halo-blue-hover);
  --halo-color-focus: var(--halo-blue);
  --halo-color-focus-ring: rgba(47, 147, 243, 0.32);

  --halo-color-surface-page: #f7f7f5;
  --halo-color-surface-raised: var(--halo-white);
  --halo-color-surface-subtle: var(--halo-gray-50);
  --halo-color-surface-muted: var(--halo-gray-100);
  --halo-color-surface-product: #fafaf7;
  /* Sean (design): dark surfaces should share the graphite family with the
     ink token — not a separate slate. One dark across the system. */
  --halo-color-surface-dark: #333333;
  --halo-color-surface-dark-raised: #404040;
  --halo-color-surface-promo: #fff7bf;

  /* Section-band surfaces use the same graphite family as the customer footer. */
  --halo-color-surface-band: var(--halo-color-surface-dark);
  --halo-color-surface-band-raised: var(--halo-color-surface-dark-raised);
  --halo-gradient-band: linear-gradient(180deg, var(--halo-color-surface-dark-raised) 0%, var(--halo-color-surface-dark) 100%);

  --halo-color-text-primary: var(--halo-ink);
  --halo-color-text-secondary: var(--halo-gray-600);
  --halo-color-text-muted: var(--halo-gray-500);
  --halo-color-text-inverse: var(--halo-white);
  --halo-color-text-inverse-muted: rgba(255, 255, 255, 0.72);

  --halo-color-border-subtle: var(--halo-gray-200);
  --halo-color-border-strong: #bdbdb7;
  --halo-color-border-dark: #444444;

  --halo-color-status-success: var(--halo-success);
  --halo-color-status-success-surface: #dcf1e2;
  --halo-color-status-warning: var(--halo-warning);
  --halo-color-status-warning-surface: #fff1c7;
  --halo-color-status-danger: var(--halo-danger);
  --halo-color-status-danger-surface: #fbe0e0;
  --halo-color-status-info: var(--halo-blue);
  --halo-color-status-info-surface: #eaf4fe;
  --halo-color-sale: var(--halo-sale);
  --halo-color-sale-surface: #fff3cc;
  --halo-color-membership: var(--halo-blue);
  /* Sean (design): the very light blue read too close to light gray as a
     background. Retire its hex and route through the gray surface token so
     existing consumers (plan cards, pack-perks wells) shift to gray, while the
     --halo-color-link / --halo-color-membership accents stay cobalt. */
  --halo-color-membership-surface: var(--halo-color-surface-muted);

  --halo-color-nav-background: var(--halo-white);
  --halo-color-nav-border: var(--halo-color-border-subtle);
  --halo-color-nav-text: var(--halo-gray-600);
  --halo-color-nav-text-active: var(--halo-ink);
  --halo-color-nav-promo-background: var(--halo-yellow);
  --halo-color-nav-promo-text: var(--halo-ink);

  --halo-color-product-surface: var(--halo-color-surface-product);
  --halo-color-card-background: var(--halo-white);
  --halo-color-card-border: var(--halo-color-border-subtle);
  --halo-color-drawer-scrim: rgba(51, 51, 51, 0.48);
  --halo-color-drawer-background: var(--halo-white);

  /* Radius, layout, and elevation */
  --halo-radius-xs: 4px;
  --halo-radius-sm: 6px;
  --halo-radius-md: 8px;
  --halo-radius-lg: 12px;
  --halo-radius-xl: 16px;
  --halo-radius-pill: 999px;

  --halo-component-nav-radius: var(--halo-radius-md);
  --halo-component-button-radius: var(--halo-radius-pill);
  --halo-component-card-radius: var(--halo-radius-lg);
  --halo-component-product-card-radius: var(--halo-radius-xl);
  --halo-component-form-radius: 10px;
  --halo-component-pdp-gallery-radius: var(--halo-radius-xl);

  --halo-container: 1400px;
  --halo-container-live: 1240px;
  --halo-container-readable: 760px;
  --halo-section-y: 88px;
  --halo-section-y-sm: 56px;
  --halo-page-gutter: 20px;

  --halo-space-2xs: 4px;
  --halo-space-xs: 8px;
  --halo-space-sm: 12px;
  --halo-space-md: 16px;
  --halo-space-lg: 24px;
  --halo-space-xl: 32px;
  --halo-space-2xl: 48px;
  --halo-space-3xl: 64px;
  --halo-space-4xl: 88px;

  --halo-shadow-nav: 0 2px 4px rgba(51, 51, 51, 0.06);
  --halo-shadow-dropdown: 0 24px 48px rgba(51, 51, 51, 0.22);
  --halo-shadow-soft: 0 1px 2px rgba(51, 51, 51, 0.05);
  --halo-shadow-card: 0 4px 14px rgba(51, 51, 51, 0.06);
  --halo-shadow-card-lg: 0 12px 28px rgba(51, 51, 51, 0.1);
  --halo-shadow-raised: 0 18px 42px rgba(51, 51, 51, 0.14);
  --halo-shadow-focus: 0 0 0 4px var(--halo-color-focus-ring);

  --halo-duration-fast: 140ms;
  --halo-duration-base: 220ms;
  --halo-duration-slow: 320ms;
  --halo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Type roles */
  --halo-type-display: 3.75rem;
  --halo-type-hero: 3.5rem;
  --halo-type-page: 3rem;
  --halo-type-section: 2.5rem;
  --halo-type-subsection: 1.75rem;
  --halo-type-card-title: 1.125rem;
  --halo-type-body: 1rem;
  --halo-type-small: 0.875rem;
  --halo-type-caption: 0.75rem;
  --halo-tracking-tight: -0.03em;

  /* Legacy source-variable bridge */
  --black: var(--halo-ink);
  --white: var(--halo-white);
  --gray-50: var(--halo-gray-50);
  --gray-100: var(--halo-gray-100);
  --gray-200: var(--halo-gray-200);
  --gray-400: var(--halo-gray-400);
  --gray-500: var(--halo-gray-500);
  --gray-600: var(--halo-gray-600);
  --gray-800: var(--halo-gray-800);
  --gray-900: var(--halo-gray-900);
  --accent: var(--halo-yellow);
  --accent-dark: var(--halo-yellow-hover);
  --success: var(--halo-success);
  --font-sans: var(--halo-font-sans);
  --font-primary: var(--halo-font-sans);
  --ease-out: var(--halo-ease-out);
}

.nav-right-mobile {
  position: relative;
  z-index: 1001;
}

.nav-mobile-toggle {
  position: relative;
  z-index: 1002;
}

/* Inter Regular looks slightly loose at display/hero/page/section/subsection
   scales — tighten with --halo-tracking-tight. Uses :where() so any explicit
   per-page rule still wins. */
:where(h1, h2, h3) {
  letter-spacing: var(--halo-tracking-tight);
}

@media (max-width: 767px) {
  :root {
    --halo-type-display: 2.8rem;
    --halo-type-hero: 2.65rem;
    --halo-type-page: 2.35rem;
    --halo-type-section: 2.1rem;
    --halo-section-y: 64px;
    --halo-section-y-sm: 44px;
    --halo-page-gutter: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --halo-type-display: 2.35rem;
    --halo-type-hero: 2.25rem;
    --halo-type-page: 2rem;
    --halo-type-section: 1.85rem;
  }
}