/* _Brand */
/* Light (default theme) */
:root {
  /* color */
  --colors-neutrals-100: rgb(255 255 255);
  --colors-neutrals-1000: rgb(0 0 0);
  --colors-neutrals-200: rgb(252 252 252);
  --colors-neutrals-300: rgb(247 247 252);
  --colors-neutrals-400: rgb(239 240 246);
  --colors-neutrals-500: rgb(217 219 233);
  --colors-neutrals-600: rgb(160 163 189);
  --colors-neutrals-700: rgb(110 113 145);
  --colors-neutrals-800: rgb(78 75 102);
  --colors-neutrals-850: rgb(45 42 62);
  --colors-neutrals-900: rgb(38 35 56);
  --colors-neutrals-950: rgb(20 20 42);
  --colors-primary-100: rgb(237 240 255);
  --colors-primary-200-base-light: rgb(189 216 255);
  --colors-primary-300: rgb(97 162 255);
  --colors-primary-400: rgb(52 132 248);
  --colors-primary-500-base-default: rgb(12 103 233);
  --colors-primary-600: rgb(9 88 202);
  --colors-primary-700: rgb(5 69 161);
  --colors-primary-800: rgb(3 48 116);
  --colors-primary-900: rgb(1 26 71);
  --colors-primary-950-base-dark: rgb(0 15 47);
  --colors-secondary-2-100: rgb(219 250 254);
  --colors-secondary-2-200: rgb(195 246 253);
  --colors-secondary-2-300: rgb(166 242 252);
  --colors-secondary-2-400: rgb(128 236 251);
  --colors-secondary-2-500-base: rgb(74 228 249);
  --colors-secondary-2-600: rgb(68 210 229);
  --colors-secondary-2-700: rgb(62 192 209);
  --colors-secondary-2-800: rgb(56 173 189);
  --colors-secondary-2-900: rgb(50 155 169);
  --colors-secondary-2-950: rgb(38 119 129);
  --colors-semantics-green-100: rgb(222 245 217);
  --colors-semantics-green-1000: rgb(7 114 81);
  --colors-semantics-green-200: rgb(190 235 180);
  --colors-semantics-green-300: rgb(161 229 150);
  --colors-semantics-green-400: rgb(130 220 115);
  --colors-semantics-green-500: rgb(98 209 107);
  --colors-semantics-green-600: rgb(73 193 115);
  --colors-semantics-green-700: rgb(45 178 108);
  --colors-semantics-green-800: rgb(15 160 105);
  --colors-semantics-green-900: rgb(10 135 93);
  --colors-semantics-red-100: rgb(255 235 238);
  --colors-semantics-red-1000: rgb(183 28 28);
  --colors-semantics-red-200: rgb(255 205 210);
  --colors-semantics-red-300: rgb(239 154 154);
  --colors-semantics-red-400: rgb(229 115 115);
  --colors-semantics-red-500: rgb(239 83 80);
  --colors-semantics-red-600: rgb(244 67 54);
  --colors-semantics-red-700: rgb(229 57 53);
  --colors-semantics-red-800: rgb(211 47 47);
  --colors-semantics-red-900: rgb(198 40 40);
  --colors-semantics-yellow-100: rgb(255 242 217);
  --colors-semantics-yellow-1000: rgb(173 111 11);
  --colors-semantics-yellow-200: rgb(255 236 199);
  --colors-semantics-yellow-300: rgb(255 225 141);
  --colors-semantics-yellow-400: rgb(255 217 112);
  --colors-semantics-yellow-500: rgb(255 205 65);
  --colors-semantics-yellow-600: rgb(242 187 51);
  --colors-semantics-yellow-700: rgb(226 171 48);
  --colors-semantics-yellow-800: rgb(216 153 29);
  --colors-semantics-yellow-900: rgb(200 135 10);
  --colors-theme-1-100: rgb(255 228 245);
  --colors-theme-1-200: rgb(255 201 236);
  --colors-theme-1-300: rgb(255 156 219);
  --colors-theme-1-400: rgb(255 95 193);
  --colors-theme-1-500: rgb(255 48 166);
  --colors-theme-1-600: rgb(245 13 130);
  --colors-theme-1-700: rgb(224 0 107);
  --colors-theme-1-800: rgb(176 4 84);
  --colors-theme-1-900: rgb(146 9 72);
  --colors-theme-1-950: rgb(91 0 40);
  --colors-theme-2-100: rgb(255 228 245);
  --colors-theme-2-200: rgb(255 201 236);
  --colors-theme-2-300: rgb(255 156 219);
  --colors-theme-2-400: rgb(255 95 193);
  --colors-theme-2-500: rgb(255 48 166);
  --colors-theme-2-600: rgb(245 13 130);
  --colors-theme-2-700: rgb(224 0 107);
  --colors-theme-2-800: rgb(176 4 84);
  --colors-theme-2-900: rgb(146 9 72);
  --colors-theme-2-950: rgb(91 0 40);
  --colors-theme-3-100: rgb(255 228 245);
  --colors-theme-3-200: rgb(255 201 236);
  --colors-theme-3-300: rgb(255 156 219);
  --colors-theme-3-400: rgb(255 95 193);
  --colors-theme-3-500: rgb(255 48 166);
  --colors-theme-3-600: rgb(245 13 130);
  --colors-theme-3-700: rgb(224 0 107);
  --colors-theme-3-800: rgb(176 4 84);
  --colors-theme-3-900: rgb(146 9 72);
  --colors-theme-3-950: rgb(91 0 40);
  --colors-theme-4-100: rgb(255 228 245);
  --colors-theme-4-200: rgb(255 201 236);
  --colors-theme-4-300: rgb(255 156 219);
  --colors-theme-4-400: rgb(255 95 193);
  --colors-theme-4-500: rgb(255 48 166);
  --colors-theme-4-600: rgb(245 13 130);
  --colors-theme-4-700: rgb(224 0 107);
  --colors-theme-4-800: rgb(176 4 84);
  --colors-theme-4-900: rgb(146 9 72);
  --colors-theme-4-950: rgb(91 0 40);
  --opacity-dark-10: rgb(0 0 0 / 0.1);
  --opacity-dark-2: rgb(0 0 0 / 0.02);
  --opacity-dark-20: rgb(0 0 0 / 0.2);
  --opacity-dark-30: rgb(0 0 0 / 0.3);
  --opacity-dark-4: rgb(0 0 0 / 0.04);
  --opacity-dark-40: rgb(0 0 0 / 0.4);
  --opacity-dark-50: rgb(0 0 0 / 0.5);
  --opacity-dark-6: rgb(0 0 0 / 0.06);
  --opacity-dark-60: rgb(0 0 0 / 0.6);
  --opacity-dark-70: rgb(0 0 0 / 0.7);
  --opacity-dark-8: rgb(0 0 0 / 0.08);
  --opacity-dark-80: rgb(0 0 0 / 0.8);
  --opacity-dark-90: rgb(0 0 0 / 0.9);
  --opacity-light-10: rgb(255 255 255 / 0.1);
  --opacity-light-2: rgb(255 255 255 / 0.02);
  --opacity-light-20: rgb(255 255 255 / 0.2);
  --opacity-light-30: rgb(255 255 255 / 0.3);
  --opacity-light-4: rgb(255 255 255 / 0.04);
  --opacity-light-40: rgb(255 255 255 / 0.4);
  --opacity-light-50: rgb(255 255 255 / 0.5);
  --opacity-light-6: rgb(255 255 255 / 0.06);
  --opacity-light-60: rgb(255 255 255 / 0.6);
  --opacity-light-70: rgb(255 255 255 / 0.7);
  --opacity-light-8: rgb(255 255 255 / 0.08);
  --opacity-light-80: rgb(255 255 255 / 0.8);
  --opacity-light-90: rgb(255 255 255 / 0.9);
  --opacity-primary-0: rgb(1 125 200 / 0);
  --opacity-primary-10: rgb(1 125 200 / 0.1);
  --opacity-primary-2: rgb(1 125 200 / 0.02);
  --opacity-primary-20: rgb(1 125 200 / 0.2);
  --opacity-primary-30: rgb(1 125 200 / 0.3);
  --opacity-primary-4: rgb(1 125 200 / 0.04);
  --opacity-primary-40: rgb(1 125 200 / 0.4);
  --opacity-primary-50: rgb(1 125 200 / 0.5);
  --opacity-primary-6: rgb(1 125 200 / 0.06);
  --opacity-primary-60: rgb(1 125 200 / 0.6);
  --opacity-primary-70: rgb(1 125 200 / 0.7);
  --opacity-primary-8: rgb(1 125 200 / 0.08);
  --opacity-primary-80: rgb(1 125 200 / 0.8);
  --opacity-primary-90: rgb(1 125 200 / 0.9);
  --opacity-secondary-0: rgb(74 228 249 / 0);
  --opacity-secondary-10: rgb(74 228 249 / 0.1);
  --opacity-secondary-2: rgb(74 228 249 / 0.02);
  --opacity-secondary-20: rgb(74 228 249 / 0.2);
  --opacity-secondary-30: rgb(74 228 249 / 0.3);
  --opacity-secondary-4: rgb(74 228 249 / 0.04);
  --opacity-secondary-40: rgb(74 228 249 / 0.4);
  --opacity-secondary-50: rgb(74 228 249 / 0.5);
  --opacity-secondary-6: rgb(74 228 249 / 0.06);
  --opacity-secondary-60: rgb(74 228 249 / 0.6);
  --opacity-secondary-70: rgb(74 228 249 / 0.7);
  --opacity-secondary-8: rgb(74 228 249 / 0.08);
  --opacity-secondary-80: rgb(74 228 249 / 0.8);
  --opacity-secondary-90: rgb(74 228 249 / 0.9);
  /* number */
  --dropshadow-blur-none: 0px;
  --dropshadow-blur-3xd: 4px;
  --dropshadow-blur-2xs: 8px;
  --dropshadow-blur-2xs-2: 10px;
  --dropshadow-blur-3xs: 12px;
  --dropshadow-blur-3xs-2: 15px;
  --dropshadow-blur-sm: 16px;
  --dropshadow-blur-md: 18px;
  --dropshadow-blur-md-2: 20px;
  --dropshadow-blur-2md: 24px;
  --dropshadow-blur-3md: 30px;
  --dropshadow-blur-lg: 40px;
  --dropshadow-blur-2lg: 50px;
  --dropshadow-blur-xl: 60px;
  --dropshadow-blur-2xl: 70px;
  --dropshadow-positioning-none: 0px;
  --dropshadow-positioning-3xs: 2px;
  --dropshadow-positioning-2xs: 4px;
  --dropshadow-positioning-xs: 6px;
  --dropshadow-positioning-sm: 8px;
  --dropshadow-positioning-2sm: 10px;
  --dropshadow-positioning-md: 12px;
  --dropshadow-positioning-2md: 15px;
  --dropshadow-positioning-lg: 16px;
  --dropshadow-positioning-2lg: 20px;
  --dropshadow-positioning-3lg: 25px;
  --dropshadow-positioning-xl: 35px;
  --dropshadow-positioning-2xl: 40px;
  --dropshadow-positioning-3xl: 48px;
  --dropshadow-positioning-4xl: 50px;
  --dropshadow-positioning-5xl: 60px;
  --dropshadow-spread-2xl: -24px;
  --dropshadow-spread-xl: -20px;
  --dropshadow-spread-lg: -16px;
  --dropshadow-spread-md: -12px;
  --dropshadow-spread-sm: -8px;
  --dropshadow-spread-xs: -4px;
  --dropshadow-spread-none: 0px;
  --radius-step-1: 0px;
  --radius-step-2: 1px;
  --radius-step-3: 2px;
  --radius-step-4: 3px;
  --radius-step-5: 4px;
  --radius-step-6: 5px;
  --radius-step-7: 6px;
  --radius-step-8: 7px;
  --radius-step-9: 8px;
  --radius-step-10: 9px;
  --radius-step-11: 10px;
  --radius-step-12: 11px;
  --radius-step-13: 12px;
  --radius-step-14: 14px;
  --radius-step-15: 16px;
  --radius-step-16: 18px;
  --radius-step-17: 20px;
  --radius-step-18: 25px;
  --radius-step-19: 30px;
  --radius-step-20: 35px;
  --radius-step-21: 40px;
  --radius-step-22: 45px;
  --radius-step-23: 50px;
  --spacing-step-1: 2px;
  --spacing-step-2: 4px;
  --spacing-step-3: 6px;
  --spacing-step-4: 8px;
  --spacing-step-5: 12px;
  --spacing-step-6: 16px;
  --spacing-step-7: 24px;
  --spacing-step-8: 32px;
  --spacing-step-9: 40px;
  --spacing-step-10: 48px;
  --spacing-step-11: 64px;
  --spacing-step-12: 80px;
  --spacing-step-13: 96px;
  --spacing-step-14: 128px;
  --spacing-step-15: 160px;
  --spacing-step-16: 192px;
  --spacing-step-17: 224px;
  --spacing-step-18: 256px;
  --spacing-step-19: 295px;
  --typography-line-height-height-step1: 14px;
  --typography-line-height-height-step2: 17px;
  --typography-line-height-height-step3: 21px;
  --typography-line-height-height-step4: 24px;
  --typography-line-height-height-step5: 26px;
  --typography-line-height-height-step6: 28px;
  --typography-line-height-height-step7: 30px;
  --typography-line-height-height-step8: 32px;
  --typography-line-height-height-step9: 34px;
  --typography-line-height-height-step10: 38px;
  --typography-line-height-height-step11: 42px;
  --typography-line-height-height-step12: 46px;
  --typography-line-height-height-step13: 50px;
  --typography-line-height-height-step14: 58px;
  --typography-line-height-height-step15: 62px;
  --typography-line-height-height-step16: 70px;
  --typography-line-height-height-step17: 78px;
  --typography-line-height-height-step18: 84px;
  --typography-line-height-height-step19: 100px;
  --typography-line-height-height-step20: 124px;
  --typography-line-height-height-step21: 156px;
  --typography-size-step-1: 10px;
  --typography-size-step-2: 12px;
  --typography-size-step-3: 14px;
  --typography-size-step-4: 16px;
  --typography-size-step-5: 18px;
  --typography-size-step-6: 20px;
  --typography-size-step-7: 22px;
  --typography-size-step-8: 24px;
  --typography-size-step-9: 28px;
  --typography-size-step-10: 32px;
  --typography-size-step-11: 36px;
  --typography-size-step-12: 40px;
  --typography-size-step-13: 44px;
  --typography-size-step-14: 48px;
  --typography-size-step-15: 52px;
  --typography-size-step-16: 60px;
  --typography-size-step-17: 68px;
  --typography-size-step-18: 84px;
  --typography-size-step-19: 100px;
  --typography-size-step-20: 124px;
  --typography-size-step-21: 156px;
  /* string */
  --typography-family-typeface-1: "Neue Haas Grotesk Text Pro";
  --typography-weight-black: Black;
  --typography-weight-black-italic: Black Italic;
  --typography-weight-bold: Bold;
  --typography-weight-bold-italic: Bold Italic;
  --typography-weight-extra-light: Extra Light;
  --typography-weight-extra-light-italic: Extra Light Italic;
  --typography-weight-extra-bold: ExtraBold;
  --typography-weight-extra-bold-italic: ExtraBold Italic;
  --typography-weight-light: Light;
  --typography-weight-medium: Medium;
  --typography-weight-medium-italic: Medium Italic;
  --typography-weight-regular: Regular;
  --typography-weight-regular-italic: Regular Italic;
  --typography-weight-semibold: Semibold;
  --typography-weight-semibold-italic: Semibold Italic;
  --typography-weight-thin: Thin;
  --typography-weight-thin-italic: Thin Italic;
}

/*
 * Dark — opt-in override (set data-theme="dark" on <html> or any container).
 * Kept out of :root so it no longer silently overwrites the Light values.
 * Only color primitives change between themes; numbers/strings stay shared.
 */
[data-theme="dark"] {
  /* color */
  --colors-neutrals-100: rgb(0 0 0);
  --colors-neutrals-1000: rgb(255 255 255);
  --colors-neutrals-200: rgb(20 20 42);
  --colors-neutrals-300: rgb(38 35 56);
  --colors-neutrals-400: rgb(45 42 62);
  --colors-neutrals-500: rgb(78 75 102);
  --colors-neutrals-600: rgb(110 113 145);
  --colors-neutrals-700: rgb(160 163 189);
  --colors-neutrals-800: rgb(217 219 233);
  --colors-neutrals-850: rgb(239 240 246);
  --colors-neutrals-900: rgb(247 247 252);
  --colors-neutrals-950: rgb(252 252 252);
  --colors-primary-100: rgb(0 15 47);
  --colors-primary-200-base-light: rgb(1 26 71);
  --colors-primary-300: rgb(3 48 116);
  --colors-primary-400: rgb(5 69 161);
  --colors-primary-500-base-default: rgb(12 103 233);
  --colors-primary-600: rgb(12 103 233);
  --colors-primary-700: rgb(52 132 248);
  --colors-primary-800: rgb(97 162 255);
  --colors-primary-900: rgb(189 216 255);
  --colors-primary-950-base-dark: rgb(237 240 255);
  --colors-secondary-2-100: rgb(38 119 129);
  --colors-secondary-2-200: rgb(50 155 169);
  --colors-secondary-2-300: rgb(56 173 189);
  --colors-secondary-2-400: rgb(62 192 209);
  --colors-secondary-2-500-base: rgb(68 210 229);
  --colors-secondary-2-600: rgb(74 228 249);
  --colors-secondary-2-700: rgb(16 229 244);
  --colors-secondary-2-800: rgb(166 242 252);
  --colors-secondary-2-900: rgb(195 246 253);
  --colors-secondary-2-950: rgb(219 250 254);
  --colors-semantics-green-100: rgb(7 114 81);
  --colors-semantics-green-1000: rgb(222 245 217);
  --colors-semantics-green-200: rgb(10 135 93);
  --colors-semantics-green-300: rgb(15 160 105);
  --colors-semantics-green-400: rgb(45 178 108);
  --colors-semantics-green-500: rgb(73 193 115);
  --colors-semantics-green-600: rgb(98 209 107);
  --colors-semantics-green-700: rgb(130 220 115);
  --colors-semantics-green-800: rgb(161 229 150);
  --colors-semantics-green-900: rgb(190 235 180);
  --colors-semantics-red-100: rgb(183 28 28);
  --colors-semantics-red-1000: rgb(255 235 238);
  --colors-semantics-red-200: rgb(198 40 40);
  --colors-semantics-red-300: rgb(211 47 47);
  --colors-semantics-red-400: rgb(229 57 53);
  --colors-semantics-red-500: rgb(244 67 54);
  --colors-semantics-red-600: rgb(239 83 80);
  --colors-semantics-red-700: rgb(229 115 115);
  --colors-semantics-red-800: rgb(239 154 154);
  --colors-semantics-red-900: rgb(255 205 210);
  --colors-semantics-yellow-100: rgb(173 111 11);
  --colors-semantics-yellow-1000: rgb(255 242 217);
  --colors-semantics-yellow-200: rgb(200 135 10);
  --colors-semantics-yellow-300: rgb(216 153 29);
  --colors-semantics-yellow-400: rgb(226 171 48);
  --colors-semantics-yellow-500: rgb(242 187 51);
  --colors-semantics-yellow-600: rgb(255 205 65);
  --colors-semantics-yellow-700: rgb(255 217 112);
  --colors-semantics-yellow-800: rgb(255 225 141);
  --colors-semantics-yellow-900: rgb(255 236 199);
  --colors-theme-1-100: rgb(91 0 40);
  --colors-theme-1-200: rgb(146 9 72);
  --colors-theme-1-300: rgb(176 4 84);
  --colors-theme-1-400: rgb(224 0 107);
  --colors-theme-1-500: rgb(245 13 130);
  --colors-theme-1-600: rgb(255 48 166);
  --colors-theme-1-700: rgb(255 95 193);
  --colors-theme-1-800: rgb(255 156 219);
  --colors-theme-1-900: rgb(255 201 236);
  --colors-theme-1-950: rgb(255 228 245);
  --colors-theme-2-100: rgb(91 0 40);
  --colors-theme-2-200: rgb(146 9 72);
  --colors-theme-2-300: rgb(176 4 84);
  --colors-theme-2-400: rgb(224 0 107);
  --colors-theme-2-500: rgb(245 13 130);
  --colors-theme-2-600: rgb(255 48 166);
  --colors-theme-2-700: rgb(255 95 193);
  --colors-theme-2-800: rgb(255 156 219);
  --colors-theme-2-900: rgb(255 201 236);
  --colors-theme-2-950: rgb(255 228 245);
  --colors-theme-3-100: rgb(91 0 40);
  --colors-theme-3-200: rgb(146 9 72);
  --colors-theme-3-300: rgb(176 4 84);
  --colors-theme-3-400: rgb(224 0 107);
  --colors-theme-3-500: rgb(245 13 130);
  --colors-theme-3-600: rgb(255 48 166);
  --colors-theme-3-700: rgb(255 95 193);
  --colors-theme-3-800: rgb(255 156 219);
  --colors-theme-3-900: rgb(255 201 236);
  --colors-theme-3-950: rgb(255 228 245);
  --colors-theme-4-100: rgb(91 0 40);
  --colors-theme-4-200: rgb(146 9 72);
  --colors-theme-4-300: rgb(176 4 84);
  --colors-theme-4-400: rgb(224 0 107);
  --colors-theme-4-500: rgb(245 13 130);
  --colors-theme-4-600: rgb(255 48 166);
  --colors-theme-4-700: rgb(255 95 193);
  --colors-theme-4-800: rgb(255 156 219);
  --colors-theme-4-900: rgb(255 201 236);
  --colors-theme-4-950: rgb(255 228 245);
}

/* Alias */
:root {
  /* Breakpoint tokens (informational — media queries cannot read variables) */
  --breakpoint-mobile: 414px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1440px;

  /*
   * TODO: the secondary-1 and secondary-3 palettes are referenced below but
   * were never defined in the brand tokens. They fall back to secondary-2
   * until real values are added.
   */
  --colors-secondary-1-100: var(--colors-secondary-2-100);
  --colors-secondary-1-200: var(--colors-secondary-2-200);
  --colors-secondary-1-300: var(--colors-secondary-2-300);
  --colors-secondary-1-400: var(--colors-secondary-2-400);
  --colors-secondary-1-500: var(--colors-secondary-2-500-base);
  --colors-secondary-1-600: var(--colors-secondary-2-600);
  --colors-secondary-1-700: var(--colors-secondary-2-700);
  --colors-secondary-1-800: var(--colors-secondary-2-800);
  --colors-secondary-1-900: var(--colors-secondary-2-900);
  --colors-secondary-1-950: var(--colors-secondary-2-950);
  --colors-secondary-3-100: var(--colors-secondary-2-100);
  --colors-secondary-3-200: var(--colors-secondary-2-200);
  --colors-secondary-3-300: var(--colors-secondary-2-300);
  --colors-secondary-3-400: var(--colors-secondary-2-400);
  --colors-secondary-3-500: var(--colors-secondary-2-500-base);
  --colors-secondary-3-600: var(--colors-secondary-2-600);
  --colors-secondary-3-700: var(--colors-secondary-2-700);
  --colors-secondary-3-800: var(--colors-secondary-2-800);
  --colors-secondary-3-900: var(--colors-secondary-2-900);
  --colors-secondary-3-950: var(--colors-secondary-2-950);

  /* color — identical on every breakpoint */
  --error-darker: var(--colors-semantics-red-800);
  --error-darkest: var(--colors-semantics-red-1000);
  --error-default: var(--colors-semantics-red-600);
  --error-light: var(--colors-semantics-red-200);
  --error-lightest: var(--colors-semantics-red-100);
  --gradient-primary-dark: var(--colors-primary-900);
  --gradient-primary-default: var(--colors-primary-500-base-default);
  --gradient-primary-light: var(--colors-primary-200-base-light);
  --gradient-secondary-dark: var(--colors-secondary-1-800);
  --gradient-secondary-default: var(--colors-secondary-1-500);
  --gradient-secondary-light: var(--colors-secondary-1-200);
  --neutrals-100-white: var(--colors-neutrals-100);
  --neutrals-1000-black: var(--colors-neutrals-1000);
  --neutrals-200: var(--colors-neutrals-200);
  --neutrals-300: var(--colors-neutrals-300);
  --neutrals-400: var(--colors-neutrals-400);
  --neutrals-500: var(--colors-neutrals-500);
  --neutrals-600: var(--colors-neutrals-600);
  --neutrals-700: var(--colors-neutrals-700);
  --neutrals-800: var(--colors-neutrals-800);
  --neutrals-850: var(--colors-neutrals-850);
  --neutrals-900: var(--colors-neutrals-900);
  --neutrals-950: var(--colors-neutrals-950);
  --overlay-dark-10: var(--opacity-dark-10);
  --overlay-dark-2: var(--opacity-dark-2);
  --overlay-dark-20: var(--opacity-dark-20);
  --overlay-dark-30: var(--opacity-dark-30);
  --overlay-dark-4: var(--opacity-dark-4);
  --overlay-dark-40: var(--opacity-dark-40);
  --overlay-dark-50: var(--opacity-dark-50);
  --overlay-dark-6: var(--opacity-dark-6);
  --overlay-dark-60: var(--opacity-dark-60);
  --overlay-dark-70: var(--opacity-dark-70);
  --overlay-dark-8: var(--opacity-dark-8);
  --overlay-dark-80: var(--opacity-dark-80);
  --overlay-dark-90: var(--opacity-dark-90);
  --overlay-light-10: var(--opacity-light-10);
  --overlay-light-2: var(--opacity-light-2);
  --overlay-light-20: var(--opacity-light-20);
  --overlay-light-30: var(--opacity-light-30);
  --overlay-light-4: var(--opacity-light-4);
  --overlay-light-40: var(--opacity-light-40);
  --overlay-light-50: var(--opacity-light-50);
  --overlay-light-6: var(--opacity-light-6);
  --overlay-light-60: var(--opacity-light-60);
  --overlay-light-70: var(--opacity-light-70);
  --overlay-light-8: var(--opacity-light-8);
  --overlay-light-80: var(--opacity-light-80);
  --overlay-light-90: var(--opacity-light-90);
  --overlay-primary-0: var(--opacity-primary-0);
  --overlay-primary-10: var(--opacity-primary-10);
  --overlay-primary-2: var(--opacity-primary-2);
  --overlay-primary-20: var(--opacity-primary-20);
  --overlay-primary-30: var(--opacity-primary-30);
  --overlay-primary-4: var(--opacity-primary-4);
  --overlay-primary-40: var(--opacity-primary-40);
  --overlay-primary-50: var(--opacity-primary-50);
  --overlay-primary-6: var(--opacity-primary-6);
  --overlay-primary-60: var(--opacity-primary-60);
  --overlay-primary-70: var(--opacity-primary-70);
  --overlay-primary-8: var(--opacity-primary-8);
  --overlay-primary-80: var(--opacity-primary-80);
  --overlay-primary-90: var(--opacity-primary-90);
  --overlay-secondary-0: var(--opacity-secondary-0);
  --overlay-secondary-10: var(--opacity-secondary-10);
  --overlay-secondary-2: var(--opacity-secondary-2);
  --overlay-secondary-20: var(--opacity-secondary-20);
  --overlay-secondary-30: var(--opacity-secondary-30);
  --overlay-secondary-4: var(--opacity-secondary-4);
  --overlay-secondary-40: var(--opacity-secondary-40);
  --overlay-secondary-50: var(--opacity-secondary-50);
  --overlay-secondary-6: var(--opacity-secondary-6);
  --overlay-secondary-60: var(--opacity-secondary-60);
  --overlay-secondary-70: var(--opacity-secondary-70);
  --overlay-secondary-8: var(--opacity-secondary-8);
  --overlay-secondary-80: var(--opacity-secondary-80);
  --overlay-secondary-90: var(--opacity-secondary-90);
  --primary-dark: var(--colors-primary-800);
  --primary-darker: var(--colors-primary-950-base-dark);
  --primary-default: var(--colors-primary-500-base-default);
  --primary-light: var(--colors-primary-200-base-light);
  --primary-lighter: var(--colors-primary-100);
  --secondary-1-dark: var(--colors-secondary-1-700);
  --secondary-1-darker: var(--colors-secondary-1-900);
  --secondary-1-default: var(--colors-secondary-1-600);
  --secondary-1-light: var(--colors-secondary-1-300);
  --secondary-1-lighter: var(--colors-secondary-1-100);
  --secondary-2-dark: var(--colors-secondary-2-700);
  --secondary-2-darker: var(--colors-secondary-2-900);
  --secondary-2-default: var(--colors-secondary-2-600);
  --secondary-2-light: var(--colors-secondary-2-300);
  --secondary-2-lighter: var(--colors-secondary-2-100);
  --secondary-3-dark: var(--colors-secondary-3-700);
  --secondary-3-darker: var(--colors-secondary-3-900);
  --secondary-3-default: var(--colors-secondary-3-600);
  --secondary-3-light: var(--colors-secondary-3-300);
  --secondary-3-lighter: var(--colors-secondary-3-200);
  --success-darker: var(--colors-semantics-green-700);
  --success-darkest: var(--colors-semantics-green-900);
  --success-default: var(--colors-semantics-green-500);
  --success-light: var(--colors-semantics-green-200);
  --success-lightest: var(--colors-semantics-green-100);
  --warning-darker: var(--colors-semantics-yellow-800);
  --warning-darkest: var(--colors-semantics-yellow-1000);
  --warning-default: var(--colors-semantics-yellow-500);
  --warning-light: var(--colors-semantics-yellow-200);
  --warning-lightest: var(--colors-semantics-yellow-100);

  /* number — radius, identical on every breakpoint */
  --radius-4xs: var(--radius-step-1);
  --radius-3xs: var(--radius-step-2);
  --radius-2xs: var(--radius-step-3);
  --radius-xs: var(--radius-step-4);
  --radius-sm: var(--radius-step-5);
  --radius-2sm: var(--radius-step-6);
  --radius-3sm: var(--radius-step-7);
  --radius-4sm: var(--radius-step-8);
  --radius-md: var(--radius-step-9);
  --radius-2md: var(--radius-step-10);
  --radius-3md: var(--radius-step-11);
  --radius-4md: var(--radius-step-12);
  --radius-5md: var(--radius-step-13);
  --radius-6md: var(--radius-step-14);
  --radius-7md: var(--radius-step-15);
  --radius-8md: var(--radius-step-16);
  --radius-9md: var(--radius-step-17);
  --radius-10md: var(--radius-step-18);
  --radius-11md: var(--radius-step-19);
  --radius-12md: var(--radius-step-20);
  --radius-13md: var(--radius-step-21);
  --radius-14md: var(--radius-step-22);
  --radius-round: var(--radius-step-23);

  /* string — families and weights (d2-bold / h5-light are set per breakpoint below) */
  --typography-family-body: var(--typography-family-typeface-1);
  --typography-family-display: var(--typography-family-typeface-1);
  --typography-weight-d1-bold: var(--typography-weight-bold);
  --typography-weight-d1-light: var(--typography-weight-light);
  --typography-weight-d1-medium: var(--typography-weight-medium);
  --typography-weight-d1-regular: var(--typography-weight-regular);
  --typography-weight-d1-semi-bold: var(--typography-weight-semibold);
  --typography-weight-d2-light: var(--typography-weight-light);
  --typography-weight-d2-medium: var(--typography-weight-medium);
  --typography-weight-d2-regular: var(--typography-weight-regular);
  --typography-weight-d2-semi-bold: var(--typography-weight-semibold);
  --typography-weight-h1-bold: var(--typography-weight-bold);
  --typography-weight-h1-light: var(--typography-weight-light);
  --typography-weight-h1-medium: var(--typography-weight-medium);
  --typography-weight-h1-regular: var(--typography-weight-regular);
  --typography-weight-h1-semi-bold: var(--typography-weight-semibold);
  --typography-weight-h2-bold: var(--typography-weight-bold);
  --typography-weight-h2-light: var(--typography-weight-light);
  --typography-weight-h2-medium: var(--typography-weight-medium);
  --typography-weight-h2-regular: var(--typography-weight-regular);
  --typography-weight-h2-semi-bold: var(--typography-weight-semibold);
  --typography-weight-h3-bold: var(--typography-weight-bold);
  --typography-weight-h3-light: var(--typography-weight-light);
  --typography-weight-h3-medium: var(--typography-weight-medium);
  --typography-weight-h3-regular: var(--typography-weight-regular);
  --typography-weight-h3-semi-bold: var(--typography-weight-semibold);
  --typography-weight-h4-bold: var(--typography-weight-bold);
  --typography-weight-h4-light: var(--typography-weight-light);
  --typography-weight-h4-medium: var(--typography-weight-medium);
  --typography-weight-h4-regular: var(--typography-weight-regular);
  --typography-weight-h4-semi-bold: var(--typography-weight-semibold);
  --typography-weight-h5-bold: var(--typography-weight-bold);
  --typography-weight-h5-medium: var(--typography-weight-medium);
  --typography-weight-h5-regular: var(--typography-weight-regular);
  --typography-weight-h5-semi-bold: var(--typography-weight-semibold);
  --typography-weight-h6-bold: var(--typography-weight-bold);
  --typography-weight-h6-light: var(--typography-weight-light);
  --typography-weight-h6-medium: var(--typography-weight-medium);
  --typography-weight-h6-regular: var(--typography-weight-regular);
  --typography-weight-h6-semi-bold: var(--typography-weight-semibold);
  --typography-weight-p1-bold: var(--typography-weight-bold);
  --typography-weight-p1-light: var(--typography-weight-light);
  --typography-weight-p1-medium: var(--typography-weight-medium);
  --typography-weight-p1-regular: var(--typography-weight-regular);
  --typography-weight-p1-semi-bold: var(--typography-weight-semibold);
  --typography-weight-p2-bold: var(--typography-weight-bold);
  --typography-weight-p2-light: var(--typography-weight-light);
  --typography-weight-p2-medium: var(--typography-weight-medium);
  --typography-weight-p2-regular: var(--typography-weight-regular);
  --typography-weight-p2-semi-bold: var(--typography-weight-semibold);
  --typography-weight-p3-bold: var(--typography-weight-bold);
  --typography-weight-p3-light: var(--typography-weight-light);
  --typography-weight-p3-medium: var(--typography-weight-medium);
  --typography-weight-p3-regular: var(--typography-weight-regular);
  --typography-weight-p3-semi-bold: var(--typography-weight-semibold);
  --typography-weight-p4-bold: var(--typography-weight-bold);
  --typography-weight-p4-light: var(--typography-weight-light);
  --typography-weight-p4-medium: var(--typography-weight-medium);
  --typography-weight-p4-regular: var(--typography-weight-regular);
  --typography-weight-p4-semi-bold: var(--typography-weight-semibold);
}

/* Mobile — default, mobile-first (< 768px) */
:root {
  /* grid */
  --grid-system-column-count: 4;
  --grid-system-gutter: 16px;
  --grid-system-margin: 24px;
  --grid-system-nav-margin: 24px;
  --grid-system-grid-container: 366px;
  --grid-system-breakpoints: 414px;
  /* spacing */
  --spacing-3xs: var(--spacing-step-1);
  --spacing-2xs: var(--spacing-step-2);
  --spacing-xs: var(--spacing-step-3);
  --spacing-sm: var(--spacing-step-4);
  --spacing-md: var(--spacing-step-5);
  --spacing-lg: var(--spacing-step-6);
  --spacing-xl: var(--spacing-step-7);
  --spacing-2xl: var(--spacing-step-8);
  --spacing-3xl: var(--spacing-step-9);
  --spacing-4xl: var(--spacing-step-10);
  --spacing-5xl: var(--spacing-step-11);
  --spacing-6xl: var(--spacing-step-12);
  --spacing-7xl: var(--spacing-step-13);
  --spacing-8xl: var(--spacing-step-14);
  --spacing-9xl: var(--spacing-step-15);
  --spacing-10xl: var(--spacing-step-16);
  --spacing-11xl: var(--spacing-step-17);
  /* typography */
  --typography-line-height-caption: var(--typography-line-height-height-step1);
  --typography-line-height-p4: var(--typography-line-height-height-step2);
  --typography-line-height-p3: var(--typography-line-height-height-step3);
  --typography-line-height-p2: var(--typography-line-height-height-step4);
  --typography-line-height-p1: var(--typography-line-height-height-step5);
  --typography-line-height-h6: var(--typography-line-height-height-step6);
  --typography-line-height-h5: var(--typography-line-height-height-step7);
  --typography-line-height-h4: var(--typography-line-height-height-step8);
  --typography-line-height-h3: var(--typography-line-height-height-step9);
  --typography-line-height-h2: var(--typography-line-height-height-step11);
  --typography-line-height-h1: var(--typography-line-height-height-step13);
  --typography-line-height-d2: var(--typography-line-height-height-step14);
  --typography-line-height-d1: var(--typography-line-height-height-step18);
  --typography-size-caption: var(--typography-size-step-1);
  --typography-size-p4: var(--typography-size-step-2);
  --typography-size-p3: var(--typography-size-step-3);
  --typography-size-p2: var(--typography-size-step-4);
  --typography-size-p1: var(--typography-size-step-5);
  --typography-size-h6: var(--typography-size-step-6);
  --typography-size-h5: var(--typography-size-step-7);
  --typography-size-h4: var(--typography-size-step-8);
  --typography-size-h3: var(--typography-size-step-9);
  --typography-size-h2: var(--typography-size-step-11);
  --typography-size-h1: var(--typography-size-step-13);
  --typography-size-d2: var(--typography-size-step-15);
  --typography-size-d1: var(--typography-size-step-18);
  --typography-weight-d2-bold: var(--typography-weight-extra-bold);
  --typography-weight-h5-light: var(--typography-weight-extra-light);
}

/* Tablet — >= 768px */
@media (min-width: 768px) {
  :root {
    /* grid */
    --grid-system-column-count: 8;
    --grid-system-gutter: 20px;
    --grid-system-margin: 32px;
    --grid-system-nav-margin: 32px;
    --grid-system-grid-container: 701px;
    --grid-system-breakpoints: 768px;
    /* spacing */
    --spacing-xs: var(--spacing-step-4);
    --spacing-sm: var(--spacing-step-5);
    --spacing-md: var(--spacing-step-6);
    --spacing-lg: var(--spacing-step-7);
    --spacing-xl: var(--spacing-step-8);
    --spacing-2xl: var(--spacing-step-9);
    --spacing-3xl: var(--spacing-step-10);
    --spacing-4xl: var(--spacing-step-11);
    --spacing-5xl: var(--spacing-step-12);
    --spacing-6xl: var(--spacing-step-13);
    --spacing-7xl: var(--spacing-step-14);
    --spacing-8xl: var(--spacing-step-15);
    --spacing-9xl: var(--spacing-step-16);
    --spacing-10xl: var(--spacing-step-17);
    --spacing-11xl: var(--spacing-step-18);
    /* typography */
    --typography-line-height-caption: var(--typography-line-height-height-step2);
    --typography-line-height-p4: var(--typography-line-height-height-step3);
    --typography-line-height-p3: var(--typography-line-height-height-step4);
    --typography-line-height-p2: var(--typography-line-height-height-step5);
    --typography-line-height-p1: var(--typography-line-height-height-step6);
    --typography-line-height-h6: var(--typography-line-height-height-step7);
    --typography-line-height-h5: var(--typography-line-height-height-step9);
    --typography-line-height-h4: var(--typography-line-height-height-step11);
    --typography-line-height-h3: var(--typography-line-height-height-step12);
    --typography-line-height-h2: var(--typography-line-height-height-step14);
    --typography-line-height-h1: var(--typography-line-height-height-step15);
    --typography-line-height-d2: var(--typography-line-height-height-step18);
    --typography-line-height-d1: var(--typography-line-height-height-step19);
    --typography-size-caption: var(--typography-size-step-1);
    --typography-size-p4: var(--typography-size-step-2);
    --typography-size-p3: var(--typography-size-step-3);
    --typography-size-p2: var(--typography-size-step-4);
    --typography-size-p1: var(--typography-size-step-5);
    --typography-size-h6: var(--typography-size-step-7);
    --typography-size-h5: var(--typography-size-step-9);
    --typography-size-h4: var(--typography-size-step-13);
    --typography-size-h3: var(--typography-size-step-14);
    --typography-size-h2: var(--typography-size-step-15);
    --typography-size-h1: var(--typography-size-step-16);
    --typography-size-d2: var(--typography-size-step-17);
    --typography-size-d1: var(--typography-size-step-19);
  }
}

/* Desktop — >= 1440px (design reference width 1920px) */
@media (min-width: 1440px) {
  :root {
    /* grid */
    --grid-system-column-count: 12;
    --grid-system-gutter: 24px;
    --grid-system-margin: 295px;
    --grid-system-nav-margin: 83px;
    --grid-system-grid-container: 1330px;
    --grid-system-breakpoints: 1920px;
    /* typography */
    --typography-line-height-caption: var(--typography-line-height-height-step2);
    --typography-line-height-p4: var(--typography-line-height-height-step3);
    --typography-line-height-p3: var(--typography-line-height-height-step4);
    --typography-line-height-p2: var(--typography-line-height-height-step5);
    --typography-line-height-p1: var(--typography-line-height-height-step6);
    --typography-line-height-h6: var(--typography-line-height-height-step7);
    --typography-line-height-h5: var(--typography-line-height-height-step10);
    --typography-line-height-h4: var(--typography-line-height-height-step13);
    --typography-line-height-h3: var(--typography-line-height-height-step14);
    --typography-line-height-h2: var(--typography-line-height-height-step16);
    --typography-line-height-h1: var(--typography-line-height-height-step17);
    --typography-line-height-d2: var(--typography-line-height-height-step19);
    --typography-line-height-d1: var(--typography-line-height-height-step20);
    --typography-size-caption: var(--typography-size-step-2);
    --typography-size-p4: var(--typography-size-step-3);
    --typography-size-p3: var(--typography-size-step-4);
    --typography-size-p2: var(--typography-size-step-5);
    --typography-size-p1: var(--typography-size-step-6);
    --typography-size-h6: var(--typography-size-step-8);
    --typography-size-h5: var(--typography-size-step-10);
    --typography-size-h4: var(--typography-size-step-14);
    --typography-size-h3: var(--typography-size-step-15);
    --typography-size-h2: var(--typography-size-step-16);
    --typography-size-h1: var(--typography-size-step-17);
    --typography-size-d2: var(--typography-size-step-18);
    --typography-size-d1: var(--typography-size-step-20);
    --typography-weight-d2-bold: var(--typography-weight-bold);
    --typography-weight-h5-light: var(--typography-weight-light);
  }
}