:root {
  --bose-color-brand-black: #000000;
  --bose-color-brand-white: #ffffff;
  --bose-color-brand-blue: #005bff;
  --bose-color-brand-sand: #c9b9a3;
  --bose-color-brand-gold: #b08a45;

  --bose-color-neutral-0: #ffffff;
  --bose-color-neutral-50: #f8f8f8;
  --bose-color-neutral-100: #f2f2f2;
  --bose-color-neutral-200: #e8e8e8;
  --bose-color-neutral-300: #d5d5d5;
  --bose-color-neutral-400: #b2b2b2;
  --bose-color-neutral-500: #8c8c8c;
  --bose-color-neutral-600: #666666;
  --bose-color-neutral-700: #444444;
  --bose-color-neutral-800: #2c2c2c;
  --bose-color-neutral-900: #121212;
  --bose-color-neutral-1000: #000000;

  --bose-color-text-primary: var(--bose-color-neutral-900);
  --bose-color-text-secondary: var(--bose-color-neutral-700);
  --bose-color-text-tertiary: var(--bose-color-neutral-600);
  --bose-color-text-inverse: var(--bose-color-brand-white);
  --bose-color-text-link: var(--bose-color-brand-blue);

  --bose-color-surface-default: var(--bose-color-brand-white);
  --bose-color-surface-elevated: var(--bose-color-neutral-50);
  --bose-color-surface-subtle: var(--bose-color-neutral-100);
  --bose-color-surface-inverse: var(--bose-color-brand-black);

  --bose-color-border-default: var(--bose-color-neutral-200);
  --bose-color-border-strong: var(--bose-color-neutral-500);
  --bose-color-border-inverse: var(--bose-color-brand-white);

  --bose-color-action-primary-bg: var(--bose-color-brand-black);
  --bose-color-action-primary-fg: var(--bose-color-brand-white);
  --bose-color-action-primary-hover-bg: var(--bose-color-neutral-800);
  --bose-color-action-secondary-bg: transparent;
  --bose-color-action-secondary-fg: var(--bose-color-brand-black);
  --bose-color-action-secondary-border: var(--bose-color-neutral-300);
  --bose-color-action-accent-bg: var(--bose-color-brand-sand);
  --bose-color-action-accent-fg: var(--bose-color-brand-black);

  --bose-color-status-success: #0f6a3f;
  --bose-color-status-warning: #9a6400;
  --bose-color-status-error: #b3261e;
  --bose-color-status-info: #0057a8;

  --bose-font-family-display: "Bose Headline", sans-serif;
  --bose-font-family-text: "Bose Text", sans-serif;
  --bose-font-family-brand: var(--bose-font-family-display);
  --bose-font-family-sans: var(--bose-font-family-text);
  --bose-font-family-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --bose-font-size-xs: 0.75rem;
  --bose-font-size-sm: 0.875rem;
  --bose-font-size-md: 1rem;
  --bose-font-size-lg: 1.125rem;
  --bose-font-size-xl: 1.5rem;
  --bose-font-size-2xl: 2rem;
  --bose-font-size-3xl: 2.5rem;
  --bose-font-size-4xl: 3.5rem;

  --bose-font-weight-light: 300;
  --bose-font-weight-regular: 400;
  --bose-font-weight-medium: 500;
  --bose-font-weight-semibold: 600;
  --bose-font-weight-bold: 700;

  --bose-line-height-tight: 1.2;
  --bose-line-height-normal: 1.5;
  --bose-line-height-relaxed: 1.7;

  --bose-tracking-tight: -0.02em;
  --bose-tracking-normal: 0em;
  --bose-tracking-wide: 0.01em;
  /* Bose Headline on bose.com opens up at larger scales; keep its tracking separate from Bose Text. */
  --bose-tracking-headline-compact: 0.03px;
  --bose-tracking-headline-standard: 0.96px;
  --bose-tracking-headline-prominent: 1.2px;
  --bose-tracking-headline-hero: 1.38px;
  --bose-tracking-headline-fluid: clamp(0px, 0.02em, 1.38px);
  --bose-tracking-headline-display: 0.01em;

  --bose-space-0: 0px;
  --bose-space-1: 4px;
  --bose-space-2: 8px;
  --bose-space-3: 12px;
  --bose-space-4: 16px;
  --bose-space-6: 24px;
  --bose-space-8: 32px;
  --bose-space-10: 40px;
  --bose-space-12: 48px;
  --bose-space-16: 64px;
  --bose-space-20: 80px;
  --bose-space-24: 96px;

  --bose-radius-none: 0px;
  --bose-radius-sm: 4px;
  --bose-radius-md: 8px;
  --bose-radius-lg: 12px;
  --bose-radius-pill: 9999px;

  --bose-border-width-hairline: 1px;
  --bose-border-width-strong: 2px;

  --bose-breakpoint-xs: 0px;
  --bose-breakpoint-sm: 480px;
  --bose-breakpoint-md: 768px;
  --bose-breakpoint-lg: 1024px;
  --bose-breakpoint-xl: 1280px;
  --bose-breakpoint-2xl: 1536px;

  --bose-container-max-sm: 640px;
  --bose-container-max-md: 768px;
  --bose-container-max-lg: 1024px;
  --bose-container-max-xl: 1280px;
  --bose-container-max-2xl: 1440px;
  --bose-container-max-content: var(--bose-container-max-xl);
  --bose-container-max-wide: var(--bose-container-max-2xl);
  --bose-layout-content-width: var(--bose-container-max-content);
  --bose-outer-rail: 1920px;
  --bose-container-padding-xs: 16px;
  --bose-container-padding-md: 24px;
  --bose-container-padding-lg: 32px;

  --bose-header-height: 72px;
  --bose-header-total-height: var(--bose-header-height);
  --bose-header-promo-height: 36px;
  --bose-header-promo-bg: #d4dde4;
  --bose-header-promo-fg: var(--bose-color-text-primary);
  --bose-header-z-index: 1000;
  --bose-mega-panel-z-index: var(--bose-header-z-index);
  --bose-color-nav-z-index: 50;
  --bose-header-bg: var(--bose-color-surface-default);
  --bose-header-border: var(--bose-color-border-default);
  --bose-nav-link-size: 0.9375rem;
  --bose-nav-link-line-height: 1.125rem;
  --bose-nav-link-weight: var(--bose-font-weight-regular);
  --bose-nav-link-color: var(--bose-color-text-primary);
  --bose-nav-link-hover-color: var(--bose-color-text-primary);
  --bose-nav-link-active-weight: var(--bose-font-weight-medium);
  --bose-mega-panel-min-height: 711px;
  --bose-mega-panel-height: var(--bose-mega-panel-min-height);
  --bose-mega-panel-inner-padding-x: 12px;
  --bose-mega-panel-nav-offset-top: 32px;
  --bose-mega-panel-nav-offset-left: 0px;
  --bose-mega-panel-nav-offset-bottom: 25px;
  --bose-mobile-nav-inner-padding-top: 16px;
  --bose-mobile-nav-item-padding-x: 16px;
  --bose-mobile-nav-item-padding-y: 10px;
  --bose-mobile-nav-item-size: 1.125rem;
  --bose-mobile-nav-item-line-height: 2rem;
  --bose-mega-link-color: #131317;
  --bose-mega-link-primary-size: 1.125rem;
  --bose-mega-link-primary-line-height: 3rem;
  --bose-mega-link-secondary-size: 1.125rem;
  --bose-mega-link-secondary-line-height: 1.5rem;
  --bose-mega-link-weight: var(--bose-font-weight-regular);
  --bose-mega-link-hover-weight: var(--bose-font-weight-medium);
  --bose-mega-panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --bose-mega-panel-border: var(--bose-color-border-default);
  --bose-header-utility-size: 44px;
  --bose-carousel-dot-size: 10px;
  --bose-carousel-dot-gap: 10px;
  --bose-carousel-nav-size: 40px;
  --bose-carousel-nav-icon-size: 14px;
  --bose-carousel-footer-spacing: var(--bose-space-4);
}

@media (max-width: 767px) {
  :root {
    --bose-font-size-4xl: 3rem;
    --bose-font-size-3xl: 2.25rem;
    --bose-font-size-2xl: 1.75rem;
    --bose-space-24: 80px;
    --bose-space-20: 64px;
  }
}

html {
  overflow-x: clip;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--bose-font-family-brand);
  letter-spacing: var(--bose-tracking-headline-fluid);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

html body {
  font-family: var(--bose-font-family-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
}