/* ========================================
   BMW USA — CSS Custom Properties
   Source: BUILD_PLAN §4 (Colors), §5 (Typography), §3.4 (Spacing), §6 (Breakpoints), §7 (Transitions)
   ======================================== */

:root {
  /* ===== 4.1 Brand Colors ===== */
  --bmw-blue:            #0066B1;
  --bmw-blue-alt:        #1D69D4;
  --bmw-light-blue:      #6FA0E3;
  --bmw-dark-text:       #221F1F;
  --bmw-medium-text:     #414141;
  --bmw-light-text:      #77787B;
  --bmw-grey-text:       #6F6F6F;
  --bmw-white:           #FFFFFF;
  --bmw-bg-light:        #EDEDEE;
  --bmw-border-grey:     #E8E8E9;
  --bmw-black:           #262626;
  --bmw-bg-light-grey:   #F6F6F6;
  --bmw-button-hover:    #727171;
  --bmw-safari-pinned:   #3969B3;

  /* ===== 5.1 Font Family ===== */
  --font-primary:  'BMWTypeNext', 'Helvetica Neue', -apple-system, 'system-ui', 'BlinkMacSystemFont', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-feature:  Arial, 'Helvetica Neue', sans-serif;
  --font-serif:    'Abril Display', Times, 'Times New Roman', serif;

  /* ===== 5.2 Type Scale Tokens ===== */
  --eyebrow-1-size:       0.6875rem;   /* 11px */
  --eyebrow-1-weight:     400;
  --eyebrow-1-ls:         0.171875rem; /* 2.75px */
  --eyebrow-1-lh:         0.9375rem;   /* 15px */

  --eyebrow-2-size:       0.625rem;    /* 10px */
  --eyebrow-2-weight:     400;
  --eyebrow-2-ls:         0.125rem;    /* 2px */
  --eyebrow-2-lh:         0.8125rem;   /* 13px */

  --label-3-bold-size:    0.75rem;     /* 12px */
  --label-3-bold-weight:  700;
  --label-3-bold-lh:      1rem;        /* 16px */

  --body-text-size:       0.75rem;     /* 12px (scales to 14px on desktop) */
  --body-text-weight:     400;
  --body-text-ls:         0.03125rem;  /* 0.5px */
  --body-text-lh:         1.25rem;     /* 20px */

  --body-default-size:    0.875rem;    /* 14px */
  --body-default-weight:  400;
  --body-default-lh:      1.25rem;     /* 20px */

  --headline-6-size:      0.875rem;    /* 14px (scales to 16px) */
  --headline-6-weight:    700;

  --headline-5-size:      1rem;        /* 16px (scales to 18px) */
  --headline-5-weight:    700;

  --headline-4-size:      1.25rem;     /* 20px (scales to 24px) */
  --headline-4-weight:    700;

  --headline-3-size:      1.75rem;     /* 28px (scales to 36px) */
  --headline-3-weight:    700;

  --headline-2-size:      2.5rem;      /* 40px (scales to 52px) */
  --headline-2-weight:    700;

  --headline-1-size:      3.5rem;      /* 56px (scales to 72px) */
  --headline-1-weight:    700;

  /* ===== 3.4 Spacer System ===== */
  --spacer-xx-small:  3px;
  --spacer-x-small:   5px;
  --spacer-small:     15px;
  --spacer-medium:    25px;
  --spacer-large:     40px;
  --spacer-x-large:   50px;
  --spacer-xx-large:  60px;

  /* ===== Nav Dimensions ===== */
  --nav-height-desktop:  64px;
  --nav-height-mobile:   56px;
  --nav-z-index:         4;
  --overlay-z-index:     3;
  --content-z-index:     1;
  --cookie-z-index:      9999;

  /* ===== 6.2 Responsive Breakpoints (as em/rem for accessibility) ===== */
  /* Using these as reference values; media queries use fixed px */
  --bp-mobile:      767px;   /* <768px  */
  --bp-tablet:      768px;   /* ≥768px  */
  --bp-tablet-plus: 960px;   /* ≥960px  */
  --bp-desktop:     1024px;  /* ≥1024px */
  --bp-large:       1200px;  /* ≥1200px */
  --bp-xlarge:      1280px;  /* ≥1280px */
  --bp-xxlarge:     1440px;  /* ≥1440px */
  --bp-ultra:       2000px;  /* ≥2000px */
  --bp-nav-switch:  890px;   /* nav mobile/desktop switch */

  /* ===== 7.1 Transition Timings ===== */
  --transition-fast:     0.2s ease;
  --transition-normal:   0.3s ease;
  --transition-slow:     0.5s ease-in-out;
  --transition-opacity:  opacity 0.2s ease;
}