:root {
  /* ---- primitive tokens (raw values) ---- */

  --size-0:   0;
  --size-1:   0.0625rem; /* 1px */
  --size-2:   0.125rem;
  --size-4:   0.25rem;
  --size-6:   0.375rem;
  --size-8:   0.5rem;
  --size-10:  0.625rem;
  --size-11: 0.6875rem;
  --size-12:  0.75rem;
  --size-14:  0.875rem;
  --size-16:  1rem;
  --size-20:  1.25rem;
  --size-24:  1.5rem;
  --size-26:  1.625rem;
  --size-30:  1.875rem;
  --size-32:  2rem;
  --size-35: 2.1875rem;
  --size-40:  2.5rem;
  --size-48:  3rem;
  --size-64:  4rem;
  --size-68: 4.25rem;
  --size-80:  5rem;
  --size-100: 6.25rem;
  --size-120: 7.5rem;
  --size-128: 8rem;
  --size-160: 10rem;
  --size-196: 12.25rem;
  --size-200: 12.5rem;
  --size-224: 14rem;
  --size-300: 18.75rem;

  /* -- Font-weight primitives -- */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-900: 900;

  /* font-size primitives (rem, 1rem = 16px base) */
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-34: 2.125rem;
  --font-size-40: 2.5rem;
  --font-size-42: 2.625rem;
  --font-size-64: 4rem;
  --font-size-72: 4.5rem;

  /* -- Line-height primitives -- */
  --lh-16: 1rem;
  --lh-20: 1.25rem;
  --lh-22: 1.375rem;
  --lh-24: 1.5rem;
  --lh-30: 1.875rem;
  --lh-32: 2rem;
  --lh-38: 2.375rem;
  --lh-44: 2.75rem;
  --lh-48: 3rem;
  --lh-64: 4rem;
  --lh-82: 5.125rem;
 
  /* -- Letter-spacing primitives -- */
  --ls-050:  0.05rem;
  --ls-0625: 0.0625rem;
  --ls-075:  0.075rem;


  /* color primitives */
  --color-black: #000;
  --color-white: #fff;
  --color-yellow: #ffd20b;
  --color-gray-900: #181819;
  --color-gray-850: #27282b;
  --color-gray-800: #36383d;
  --color-gray-600: #515151;
  --color-gray-550: #696969;
  --color-gray-500: #828282;
  --color-gray-350: #c7c7c7;
  --color-gray-300: #d7d7d7;
  --color-gray-400: #f7f7f7;
  --color-gray-200: #eaeaea;
  --color-gray-100: #f4f4f4;
  --color-blue: #225093;
  --color-blue-100: #eef4fb;



/* ---- semantic tokens ---- */

  /* breakpoints */
  --bp-sm: 880px;   /* mobile -> tablet type change happens here */
  --bp-md: 1100px;  /* tablet -> desktop type change happens here */
  --bp-lg: 1320px;  /* desktop -> lg-desktop change happens here */

  /* colors */
  --background-color: var(--color-white);
  --light-color: var(--color-gray-200);
  --lighter-color: var(--color-gray-100);
  --dark-color: var(--color-gray-900);
  --dark-color-secondary: var(--color-gray-800);
  --text-color: var(--color-gray-600);
  --heading-color: var(--color-black);
  --border-color: var(--color-gray-300);
  --muted-color: var(--color-gray-500);
  --link-color: var(--color-gray-900);
  --link-hover-color: var(--link-accent-color);
  --link-accent-color: var(--color-blue);
  --accent-color: var(--color-yellow);
  --accent-text-color: var(--color-black);

  /* elevation & overlays -- alpha can't be layered onto the hex primitives above, so these
     carry their own channel values */
  --shadow-color: rgb(0 0 0 / 20%);
  --shadow-color-subtle: rgb(0 0 0 / 5%);
  --shadow-md: 0 var(--size-4) var(--size-16) var(--shadow-color);
  --overlay-color: rgb(19 19 19 / 45%);
  --overlay-color-strong: rgb(19 19 19 / 65%);

  /* the transparent end of a dark gradient: `transparent` is rgb(0 0 0 / 0), which sRGB
     interpolation drags through grey, so the stop keeps the dark hue and drops only alpha */
  --overlay-fade-end: rgb(24 24 25 / 0%);

  /* spacing */
  --space-0:   var(--size-0);
  --space-px:  var(--size-1);   /* hairline borders, not really "spacing" */
  --space-3xs: var(--size-4);   /* icon-to-text gaps, tight paddings */
  --space-2xs: var(--size-8);   /* badge/tag padding, small icon margins */
  --space-xs:  var(--size-10);  /* form control padding, gutter/2 */
  --space-sm:  var(--size-12);  /* button padding (small), label padding */
  --space-md:  var(--size-16);  /* default gap, base grid unit */
  --space-base:var(--size-20);  /* mobile page gutter, card padding */
  --space-lg:  var(--size-24);  /* card gap, form-group spacing */
  --space-xl:  var(--size-32);  /* component margin-bottom, grid row-gap */
  --space-2xl: var(--size-40);  /* card padding (desktop), button (large) */
  --space-3xl: var(--size-48);  /* block spacing, section sub-gaps */
  --space-4xl: var(--size-64);  /* component margin-bottom (desktop) */
  --space-5xl: var(--size-80);  /* section padding (desktop) */
  --space-6xl: var(--size-100); /* hero/feature block spacing */
  --space-7xl: var(--size-120); /* large section padding */
  --space-8xl: var(--size-160); /* hero vertical rhythm */
  --space-9xl: var(--size-200); /* largest hero/dropdown spacing */

  /* typography */

  --font-family-montserrat: "Montserrat", "Montserrat-fallback", sans-serif;

  /* font sizes */
  --font-3xs:  var(--font-size-12); /* overline, legal, subtitle2, button2, h6(mobile) */
  --font-2xs:  var(--font-size-14); /* body2, h5(mobile) */
  --font-xs:   var(--font-size-15); /* button1, caption, filter text */
  --font-sm:   var(--font-size-16); /* body, list, h4(mobile) */
  --font-base: var(--font-size-18); /* h6(desktop), subtitle1 */
  --font-md:   var(--font-size-20); /* h5(mobile lead/quote/subhead), h3(mobile-ish) */
  --font-lg:   var(--font-size-24); /* h2(mobile), h4(desktop), big-text(mobile) */
  --font-xl:   var(--font-size-28); /* h3(desktop), subhead(desktop) */
  --font-2xl:  var(--font-size-30); /* lead(desktop) */
  --font-3xl:  var(--font-size-32); /* h1(mobile), big-text(mobile dup) */
  --font-4xl:  var(--font-size-34); /* h1(mobile, alt) */
  --font-5xl:  var(--font-size-40); /* quote-text(desktop) */
  --font-6xl:  var(--font-size-42); /* h2(desktop) */
  --font-7xl:  var(--font-size-64); /* h1(desktop dup), big-text(desktop) */
  --font-8xl:  var(--font-size-72); /* h1(desktop, primary) */
 
  /* line-height */
  --leading-3xs: var(--lh-16);
  --leading-2xs: var(--lh-20);
  --leading-xs:  var(--lh-22);
  --leading-sm:  var(--lh-24);
  --leading-base:var(--lh-30);
  --leading-md:  var(--lh-32);
  --leading-lg:  var(--lh-38);
  --leading-xl:  var(--lh-44);
  --leading-2xl: var(--lh-48);
  --leading-3xl: var(--lh-64); /* big-text & thin-heading-lg (desktop only) */
  --leading-4xl: var(--lh-82); /* h1 (desktop only) */
 
  /* font weights */
  --font-weight-light:    var(--fw-300); /* lead, subhead, thin-heading-lg */
  --font-weight-normal:  var(--fw-400); /* body copy default ("normal") */
  --font-weight-medium:   var(--fw-500); /* quote-text, nav items, chosen select */
  --font-weight-semibold: var(--fw-600); /* h6 */
  --font-weight-bold:     var(--fw-700); /* h1–h5, big/subtitle/button/overline ("bold" keyword) */
  --font-weight-black:    var(--fw-900); /* h6 strong */


  /* font family */
  --body-font-family: var(--font-family-montserrat);
  --heading-font-family: var(--font-family-montserrat);


  /* body sizes */
  --body-font-size: var(--font-sm);
  --body-line-height: var(--leading-sm);

  /* heading sizes */
  --heading-font-size-xxl: var(--font-4xl); /* h1 mobile */
  --heading-font-size-xl: var(--font-lg); /* h2 mobile */
  --heading-font-size-l: var(--font-md); /* h3 mobile */
  --heading-font-size-m: var(--font-sm); /* h4 mobile */
  --heading-font-size-s: var(--font-2xs); /* h5 mobile */
  --heading-font-size-xs: var(--font-3xs); /* h6 mobile */
  --heading-line-height-xxl: var(--leading-md);
  --heading-line-height-xl: var(--leading-md);
  --heading-line-height-l: var(--leading-sm);
  --heading-line-height-m: var(--leading-sm);
  --heading-line-height-s: var(--leading-3xs);
  --heading-line-height-xs: var(--leading-3xs);
  --heading-bottom-spacing-xxl: var(--space-md);
  --heading-bottom-spacing-xl: var(--space-md);
  --heading-bottom-spacing-l: var(--space-2xs);
  --heading-bottom-spacing-m: var(--space-2xs);
  --heading-bottom-spacing-s: var(--space-2xs);
  --heading-bottom-spacing-xs: var(--space-2xs);

  /* spacing */
  --space-section-xs:   var(--size-26); /* section--spacing--xsmall (mobile) */
  --space-section-sm:   var(--size-26); /* section--spacing--small  (mobile) */
  --space-section-md:   var(--size-32); /* section--spacing (default, mobile) */
  --space-section-lg:   var(--size-64); /* section--spacing--80 / --large (mobile) */
  --space-section-xl:   var(--size-64); /* section--spacing--xlarge (mobile) */
  --space-section-2xl:  var(--size-64); /* section--spacing--xxlarge (mobile) */
  --space-section-3xl:  var(--size-64); /* spacing--midxlarge (mobile) */
  --space-section-4xl:  var(--size-128);/* spacing--xxxlarge (mobile) */
  --space-component-gap:var(--size-40); /* default .paragraph margin-bottom (mobile) */

  /*
   * buttons/links
   */
  --button-radius: var(--size-32);
  --btn-font-size: var(--font-size-15);
  --btn-padding-block: var(--space-sm);
  --btn-padding-inline: var(--space-lg);
  --btn-border-width: var(--space-px);
  --btn-letter-spacing: var(--space-px);
  --btn-icon-gap: var(--space-sm);
  --btn-link-underline-width: var(--size-1);
  --btn-link-underline-offset: var(--space-3xs);
  --btn-link-secondary-underline-width: var(--space-px);
  --btn-line-height: var(--leading-3xs);
  --btn-link-line-height: 1.875rem;
  --btn-link-secondary-line-height: 1.875rem;
  --btn-link-icon-size: 0.875rem;

  /*
   * form controls (text/search inputs, checkboxes) 
  */
  --control-border-width: var(--space-px);
  --control-radius: var(--space-3xs);
  --control-height: var(--size-64);

  /*
   * content spacing -- headings/text blocks use em so margins scale with each element's own
   * font-size (not a fixed root rem value); code blocks and the icon default use rem.
   */
  --content-margin-block-start: 0.8rem;
  --content-margin-block-end: 1.25rem;
  --heading-scroll-margin: 2.5rem;
  --code-block-padding: 1rem;
  --code-block-radius: 0.5rem;
  --icon-size: 1.5rem;

  /* layout */
  --container-max-width: var(--bp-lg);
  --container-max-width-md: var(--bp-md);
  --container-max-width-sm: var(--bp-sm);
  --main-content-margin-block: 2.5rem;
  --main-content-margin-inline: 1rem;
  --section-margin-block: 2.5rem;
  --section-padding-block: 2.5rem;
  --section-padding-inline: 1.5rem;
  --section-flex-gap: 2.5rem;

  /*
   * nav-specific desktop breakpoint, 
   */
  --nav-breakpoint: var(--bp-lg);

  /* z-index scale */
  --z-header: 200;
  --z-mega-menu: 210;
  --z-drawer: 220;
  --z-mobile-panel: 225;

  /* motion */
  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;
  --transition-drawer: 0.3s ease;
}

/* the motion tokens carry duration and easing together, so reducing motion is one value
   reassignment rather than a per-component override. 0.001s rather than 0s keeps transitionend
   firing for the JS that waits on it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.001s ease;
    --transition-base: 0.001s ease;
    --transition-drawer: 0.001s ease;
  }
}

@media (width >=880px) {
  :root {
    --body-font-size: var(--font-base);
    --body-line-height: var(--leading-base);

    /* heading sizes */
    --heading-font-size-xxl: var(--font-8xl); /* h1 mobile */
    --heading-font-size-xl: var(--font-6xl); /* h2 mobile */
    --heading-font-size-l: var(--font-xl); /* h3 mobile */
    --heading-font-size-m: var(--font-lg); /* h4 mobile */
    --heading-font-size-s: var(--font-md); /* h5 mobile */
    --heading-font-size-xs: var(--font-3xs); /* h6 mobile */
    --heading-line-height-xxl: var(--leading-4xl);
    --heading-line-height-xl: var(--leading-2xl);
    --heading-line-height-l: var(--leading-md);
    --heading-line-height-m: var(--leading-md);
    --heading-line-height-s: var(--leading-xs);
    --heading-line-height-xs: var(--leading-2xs);
    --heading-bottom-spacing-xxl: var(--space-xl);
    --heading-bottom-spacing-xl: var(--space-xl);
    --heading-bottom-spacing-l: var(--space-md);
    --heading-bottom-spacing-m: var(--space-md);

    /* section spacing */
    --space-section-xs:  var(--size-32);
    --space-section-sm:  var(--size-32);
    --space-section-md:  var(--size-40);
    --space-section-lg:  var(--size-64);
    --space-section-xl:  var(--size-80);
    --space-section-2xl: var(--size-80);
    --space-section-3xl: var(--size-128);
    --space-section-4xl: var(--size-128);
    --space-component-gap: var(--size-64);
  }
}

@media (width >=1100px) {
  :root {
    --space-section-xs:  var(--size-32);
    --space-section-sm:  var(--size-40);
    --space-section-md:  var(--size-40);
    --space-section-lg:  var(--size-80);
    --space-section-xl:  var(--size-128);
    --space-section-2xl: var(--size-160);
    --space-section-3xl: var(--size-160);
    --space-section-4xl: var(--size-224);
    --space-component-gap: var(--size-80);
  }
}

.background-primary {
  background-color: var(--accent-color);
  color: var(--accent-text-color);
}

.background-dark {
  --link-color: var(--color-yellow);

  background-color: var(--dark-color);
  color: var(--background-color);

  /* headings default to --heading-color (near-black) regardless of ancestor text color,
     so a dark section needs an explicit override or its heading is invisible */
  :is(h1, h2, h3, h4, h5, h6) {
    color: var(--background-color);
  }

  /* .btn-link/.btn-link-secondary default --btn-color to --heading-color for the same
     reason as headings above -- same fix, reassigning the component's own custom property.
     Qualified with .btn/button so it outranks styles.css's own `.btn.btn-link` default:
     unqualified, the two are an exact specificity tie that library.css loses on load order,
     leaving every .btn-link on a dark section black-on-black. */
  :is(.btn.btn-link, .btn.btn-link-secondary, button.btn-link, button.btn-link-secondary) {
    --btn-color: var(--background-color);
  }
}

.text-center {
  text-align: center;
}

.text-3xs { 
  font-size: var(--font-3xs);
  line-height: var(--leading-3xs); 
}

.text-2xs { 
  font-size: var(--font-2xs);
  line-height: var(--leading-2xs); 
}

.text-xs  { 
  font-size: var(--font-xs); 
  line-height: var(--leading-xs);  
}

.text-sm  { 
  font-size: var(--font-sm); 
  line-height: var(--leading-sm);  
}

.text-base{ 
  font-size: var(--font-base);
  line-height: var(--leading-base);
}

.text-md  { 
  font-size: var(--font-md); 
  line-height: var(--leading-md);  
}

.text-lg  { 
  font-size: var(--font-lg); 
  line-height: var(--leading-lg);  
}

.text-xl  { 
  font-size: var(--font-xl); 
  line-height: var(--leading-xl);  
}

.text-2xl { 
  font-size: var(--font-2xl);
  line-height: var(--leading-2xl); 
}

.text-3xl { 
  font-size: var(--font-3xl);
  line-height: var(--leading-2xl); 
}

.text-4xl { 
  font-size: var(--font-4xl);
  line-height: var(--leading-md);  
}

.text-5xl { 
  font-size: var(--font-5xl);
  line-height: var(--leading-2xl); 
}

.text-6xl { 
  font-size: var(--font-6xl);
  line-height: var(--leading-2xl); 
}

.text-7xl { 
  font-size: var(--font-7xl);
  line-height: var(--leading-2xl); 
}

.text-8xl { 
  font-size: var(--font-8xl);
  line-height: var(--leading-3xl); 
}

.text-overline {
  font-size: var(--font-3xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-075);
  color: var(--muted-color);
}


.fw-light    { font-weight: var(--font-weight-light); }
.fw-regular  { font-weight: var(--font-weight-regular); }
.fw-medium   { font-weight: var(--font-weight-medium); }
.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-bold     { font-weight: var(--font-weight-bold); }
.fw-black    { font-weight: var(--font-weight-black); }