@cbpds/web-components/dist/collection/components/cbp-app/css-variables.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* Do not edit directly, this file was auto-generated.
*/
:root {
  --cbp-motion-duration-instant: 1ms;
  --cbp-motion-duration-shortest: 200ms;
  --cbp-motion-duration-shorter: 300ms;
  --cbp-motion-duration-short: 400ms;
  --cbp-motion-duration-medium: 500ms;
  --cbp-motion-duration-long: 750ms;
  --cbp-motion-duration-longer: 1s;
  --cbp-motion-duration-longest: 2s;
  --cbp-motion-easing-linear: 0, 0, 1, 1;
  --cbp-motion-easing-standard: 0.2, 0, 0, 1;
  --cbp-motion-easing-standard-accelerate: 0.3, 0, 1, 1;
  --cbp-motion-easing-standard-decelerate: 0, 0, 0, 1;
  --cbp-motion-easing-emphasized: 0.2, 0, 0, 1;
  --cbp-motion-easing-emphasized-accelerate: 0.3, 0, 0.8, 0.15;
  --cbp-motion-easing-emphasized-decelerate: 0.05, 0.7, 0.1, 1;
  --cbp-motion-easing-motion-path: linear;
  --cbp-border-size-sm: .0625rem;
  --cbp-border-size-md: .125rem;
  --cbp-border-size-lg: .1875rem;
  --cbp-border-size-xl: .25rem;
  --cbp-border-radius-sharp: 0;
  --cbp-border-radius-soft: 0.1875rem;
  --cbp-border-radius-softer: 0.3125rem;
  --cbp-border-radius-softest: 0.625rem;
  --cbp-border-radius-pill: 9999px;
  --cbp-border-radius-circle: 100%;
  --cbp-breakpoint-sm: 37.5em;
  --cbp-breakpoint-md: 37.5em;
  --cbp-breakpoint-lg: 64em;
  --cbp-breakpoint-xl: 90em;
  --cbp-color-black: #000000;
  --cbp-color-blue-5: #e8f5ff;
  --cbp-color-blue-10: #cfe8ff;
  --cbp-color-blue-20: #a1d3ff;
  --cbp-color-blue-30: #58b4ff;
  --cbp-color-blue-40: #2491ff;
  --cbp-color-blue-50: #0076d6;
  --cbp-color-blue-60: #005ea2;
  --cbp-color-blue-70: #0b4778;
  --cbp-color-blue-80: #112f4e;
  --cbp-color-blue-cool-5: #e1f3f8;
  --cbp-color-blue-cool-10: #c3ebfa;
  --cbp-color-blue-cool-20: #97d4ea;
  --cbp-color-blue-cool-30: #59b9de;
  --cbp-color-blue-cool-40: #28a0cb;
  --cbp-color-blue-cool-50: #0d7ea2;
  --cbp-color-blue-cool-60: #07648d;
  --cbp-color-blue-cool-70: #074b69;
  --cbp-color-blue-cool-80: #002d3f;
  --cbp-color-blue-warm-5: #edf5ff;
  --cbp-color-blue-warm-10: #d4e5ff;
  --cbp-color-blue-warm-20: #adcdff;
  --cbp-color-blue-warm-30: #81aefc;
  --cbp-color-blue-warm-40: #5994f6;
  --cbp-color-blue-warm-50: #2672de;
  --cbp-color-blue-warm-60: #0050d8;
  --cbp-color-blue-warm-70: #1a4480;
  --cbp-color-blue-warm-80: #162e51;
  --cbp-color-cyan-5: #e5faff;
  --cbp-color-cyan-10: #a8f2ff;
  --cbp-color-cyan-20: #52daf2;
  --cbp-color-cyan-30: #00bde3;
  --cbp-color-cyan-40: #009ec1;
  --cbp-color-cyan-50: #0081a1;
  --cbp-color-cyan-60: #00687d;
  --cbp-color-cyan-70: #0e4f5c;
  --cbp-color-cyan-80: #093b44;
  --cbp-color-gold-5: #fef0c8;
  --cbp-color-gold-10: #ffe396;
  --cbp-color-gold-20: #ffbe2e;
  --cbp-color-gold-30: #e5a000;
  --cbp-color-gold-40: #c2850c;
  --cbp-color-gold-50: #936f38;
  --cbp-color-gold-60: #7a591a;
  --cbp-color-gold-70: #5c410a;
  --cbp-color-gold-80: #3b2b15;
  --cbp-color-gray-1: #fcfcfc;
  --cbp-color-gray-2: #f9f9f9;
  --cbp-color-gray-3: #f6f6f6;
  --cbp-color-gray-4: #f3f3f3;
  --cbp-color-gray-5: #f0f0f0;
  --cbp-color-gray-10: #e6e6e6;
  --cbp-color-gray-20: #c9c9c9;
  --cbp-color-gray-30: #adadad;
  --cbp-color-gray-40: #919191;
  --cbp-color-gray-50: #757575;
  --cbp-color-gray-60: #5c5c5c;
  --cbp-color-gray-70: #454545;
  --cbp-color-gray-80: #2e2e2e;
  --cbp-color-gray-90: #1b1b1b;
  --cbp-color-gray-cool-1: #fbfcfd;
  --cbp-color-gray-cool-2: #f7f9fa;
  --cbp-color-gray-cool-3: #f5f6f7;
  --cbp-color-gray-cool-4: #f1f3f6;
  --cbp-color-gray-cool-5: #edeff0;
  --cbp-color-gray-cool-10: #dfe1e2;
  --cbp-color-gray-cool-20: #c6cace;
  --cbp-color-gray-cool-30: #a9aeb1;
  --cbp-color-gray-cool-40: #8d9297;
  --cbp-color-gray-cool-50: #71767a;
  --cbp-color-gray-cool-60: #565c65;
  --cbp-color-gray-cool-70: #3d4551;
  --cbp-color-gray-cool-80: #2d2e2f;
  --cbp-color-gray-cool-90: #1c1d1f;
  --cbp-color-gray-warm-1: #fcfcfb;
  --cbp-color-gray-warm-2: #f9f9f7;
  --cbp-color-gray-warm-3: #f6f6f2;
  --cbp-color-gray-warm-4: #f5f5f0;
  --cbp-color-gray-warm-5: #f0f0ec;
  --cbp-color-gray-warm-10: #e6e6e2;
  --cbp-color-gray-warm-20: #cac9c0;
  --cbp-color-gray-warm-30: #afaea2;
  --cbp-color-gray-warm-40: #929285;
  --cbp-color-gray-warm-50: #76766a;
  --cbp-color-gray-warm-60: #5d5d52;
  --cbp-color-gray-warm-70: #454540;
  --cbp-color-gray-warm-80: #2e2e2a;
  --cbp-color-gray-warm-90: #171716;
  --cbp-color-green-5: #ddf9c7;
  --cbp-color-green-10: #c5ee93;
  --cbp-color-green-20: #98d035;
  --cbp-color-green-30: #7fb135;
  --cbp-color-green-40: #719f2a;
  --cbp-color-green-50: #538200;
  --cbp-color-green-60: #466c04;
  --cbp-color-green-70: #2f4a0b;
  --cbp-color-green-80: #243413;
  --cbp-color-green-warm-5: #f5fbc1;
  --cbp-color-green-warm-10: #e7f434;
  --cbp-color-green-warm-20: #c5d30a;
  --cbp-color-green-warm-30: #a3b72c;
  --cbp-color-green-warm-40: #7e9c1d;
  --cbp-color-green-warm-50: #6a7d00;
  --cbp-color-green-warm-60: #5a6613;
  --cbp-color-green-warm-70: #4b4e10;
  --cbp-color-green-warm-80: #38380b;
  --cbp-color-green-cool-5: #e3f5e1;
  --cbp-color-green-cool-10: #b7f5bd;
  --cbp-color-green-cool-20: #70e17b;
  --cbp-color-green-cool-30: #21c834;
  --cbp-color-green-cool-40: #00a91c;
  --cbp-color-green-cool-50: #008817;
  --cbp-color-green-cool-60: #216e1f;
  --cbp-color-green-cool-70: #154c21;
  --cbp-color-green-cool-80: #19311e;
  --cbp-color-indigo-5: #f0f0ff;
  --cbp-color-indigo-10: #e0e0ff;
  --cbp-color-indigo-20: #ccceff;
  --cbp-color-indigo-30: #a3a7fa;
  --cbp-color-indigo-40: #8289ff;
  --cbp-color-indigo-50: #656bd7;
  --cbp-color-indigo-60: #4a50c4;
  --cbp-color-indigo-70: #3333a3;
  --cbp-color-indigo-80: #212463;
  --cbp-color-indigo-cool-5: #edf0ff;
  --cbp-color-indigo-cool-10: #dee5ff;
  --cbp-color-indigo-cool-20: #b8c8ff;
  --cbp-color-indigo-cool-30: #94adff;
  --cbp-color-indigo-cool-40: #628ef4;
  --cbp-color-indigo-cool-50: #4866ff;
  --cbp-color-indigo-cool-60: #3e4ded;
  --cbp-color-indigo-cool-70: #222fbf;
  --cbp-color-indigo-cool-80: #1b2b85;
  --cbp-color-indigo-warm-5: #f5f2ff;
  --cbp-color-indigo-warm-10: #e4deff;
  --cbp-color-indigo-warm-20: #cfc4fd;
  --cbp-color-indigo-warm-30: #b69fff;
  --cbp-color-indigo-warm-40: #967efb;
  --cbp-color-indigo-warm-50: #745fe9;
  --cbp-color-indigo-warm-60: #5942d2;
  --cbp-color-indigo-warm-70: #3d2c9d;
  --cbp-color-indigo-warm-80: #261f5b;
  --cbp-color-magenta-5: #fff2f5;
  --cbp-color-magenta-10: #ffddea;
  --cbp-color-magenta-20: #ffb4cf;
  --cbp-color-magenta-30: #ff87b2;
  --cbp-color-magenta-40: #fd4496;
  --cbp-color-magenta-50: #d72d79;
  --cbp-color-magenta-60: #ab2165;
  --cbp-color-magenta-70: #731f44;
  --cbp-color-magenta-80: #4f172e;
  --cbp-color-mint-5: #c9fbeb;
  --cbp-color-mint-10: #83fcd4;
  --cbp-color-mint-20: #0ceda6;
  --cbp-color-mint-30: #04c585;
  --cbp-color-mint-40: #00a871;
  --cbp-color-mint-50: #008659;
  --cbp-color-mint-60: #146947;
  --cbp-color-mint-70: #0c4e29;
  --cbp-color-mint-80: #0d351e;
  --cbp-color-mint-cool-5: #d5fbf3;
  --cbp-color-mint-cool-10: #7efbe1;
  --cbp-color-mint-cool-20: #29e1cb;
  --cbp-color-mint-cool-30: #1dc2ae;
  --cbp-color-mint-cool-40: #00a398;
  --cbp-color-mint-cool-50: #008480;
  --cbp-color-mint-cool-60: #0f6460;
  --cbp-color-mint-cool-70: #0b4b3f;
  --cbp-color-mint-cool-80: #123131;
  --cbp-color-orange-5: #fef2e4;
  --cbp-color-orange-10: #fce2c5;
  --cbp-color-orange-20: #ffbc78;
  --cbp-color-orange-30: #fa9441;
  --cbp-color-orange-40: #e66f0e;
  --cbp-color-orange-50: #c05600;
  --cbp-color-orange-60: #8c471c;
  --cbp-color-orange-70: #5f3617;
  --cbp-color-orange-80: #352313;
  --cbp-color-red-5: #fff3f2;
  --cbp-color-red-10: #fde0db;
  --cbp-color-red-20: #fdb8ae;
  --cbp-color-red-30: #ff8d7b;
  --cbp-color-red-40: #fb5a47;
  --cbp-color-red-50: #e52207;
  --cbp-color-red-60: #b50909;
  --cbp-color-red-70: #8b0a03;
  --cbp-color-red-80: #5c1111;
  --cbp-color-red-warm-5: #fff5ee;
  --cbp-color-red-warm-10: #fce1d4;
  --cbp-color-red-warm-20: #f6bd9c;
  --cbp-color-red-warm-30: #f39268;
  --cbp-color-red-warm-40: #ef5e25;
  --cbp-color-red-warm-50: #d54309;
  --cbp-color-red-warm-60: #9c3d10;
  --cbp-color-red-warm-70: #63340f;
  --cbp-color-red-warm-80: #3e2a1e;
  --cbp-color-red-cool-5: #fff2f5;
  --cbp-color-red-cool-10: #f8dfe2;
  --cbp-color-red-cool-20: #f8b9c5;
  --cbp-color-red-cool-30: #fd8ba0;
  --cbp-color-red-cool-40: #f45d79;
  --cbp-color-red-cool-50: #e41d3d;
  --cbp-color-red-cool-60: #b21d38;
  --cbp-color-red-cool-70: #822133;
  --cbp-color-red-cool-80: #4f1c24;
  --cbp-color-violet-5: #f7f2ff;
  --cbp-color-violet-10: #ede3ff;
  --cbp-color-violet-20: #d5bfff;
  --cbp-color-violet-30: #c39deb;
  --cbp-color-violet-40: #ad79e9;
  --cbp-color-violet-50: #9355dc;
  --cbp-color-violet-60: #783cb9;
  --cbp-color-violet-70: #54278f;
  --cbp-color-violet-80: #39215e;
  --cbp-color-violet-warm-5: #fef2ff;
  --cbp-color-violet-warm-10: #fbdcff;
  --cbp-color-violet-warm-20: #f4b2ff;
  --cbp-color-violet-warm-30: #ee83ff;
  --cbp-color-violet-warm-40: #d85bef;
  --cbp-color-violet-warm-50: #be32d0;
  --cbp-color-violet-warm-60: #93348c;
  --cbp-color-violet-warm-70: #711e6c;
  --cbp-color-violet-warm-80: #481441;
  --cbp-color-white: #ffffff;
  --cbp-color-yellow-5: #fff5c2;
  --cbp-color-yellow-10: #fee685;
  --cbp-color-yellow-20: #face00;
  --cbp-color-yellow-30: #ddaa01;
  --cbp-color-yellow-40: #b38c00;
  --cbp-color-yellow-50: #947100;
  --cbp-color-yellow-60: #776017;
  --cbp-color-yellow-70: #5c4809;
  --cbp-color-yellow-80: #422d19;
  --cbp-color-branding-dhs-blue: #005288;
  --cbp-color-backdrop-light: rgba(0, 0, 0, 0.3);
  --cbp-color-backdrop-dark: rgba(0, 0, 0, 0.5);
  --cbp-shadow-level-1-center: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
  --cbp-shadow-level-1-up: 0px -2px 4px 0px rgba(0, 0, 0, 0.5);
  --cbp-shadow-level-1-down: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  --cbp-shadow-level-1-right: 2px 0px 4px 0px rgba(0, 0, 0, 0.5);
  --cbp-shadow-level-1-left: -2px 0px 4px 0px rgba(0, 0, 0, 0.5);
  --cbp-shadow-level-2-center: 0px 0px 6px 1px rgba(0, 0, 0, 0.4);
  --cbp-shadow-level-2-up: 0px -3px 6px 1px rgba(0, 0, 0, 0.4);
  --cbp-shadow-level-2-down: 0px 3px 6px 1px rgba(0, 0, 0, 0.4);
  --cbp-shadow-level-2-right: 3px 0px 6px 1px rgba(0, 0, 0, 0.4);
  --cbp-shadow-level-2-left: -3px 0px 6px 1px rgba(0, 0, 0, 0.4);
  --cbp-shadow-level-3-center: 0px 0px 10px 2px rgba(0, 0, 0, 0.35);
  --cbp-shadow-level-3-up: 0px -5px 10px 2px rgba(0, 0, 0, 0.35);
  --cbp-shadow-level-3-down: 0px 5px 10px 2px rgba(0, 0, 0, 0.35);
  --cbp-shadow-level-3-right: 5px 0px 10px 2px rgba(0, 0, 0, 0.35);
  --cbp-shadow-level-3-left: -5px 0px 10px 2px rgba(0, 0, 0, 0.35);
  --cbp-shadow-level-4-center: 0px 0px 18px 2px rgba(0, 0, 0, 0.3);
  --cbp-shadow-level-4-up: 0px -7px 18px 2px rgba(0, 0, 0, 0.3);
  --cbp-shadow-level-4-down: 0px 7px 18px 2px rgba(0, 0, 0, 0.3);
  --cbp-shadow-level-4-right: 7px 0px 18px 2px rgba(0, 0, 0, 0.3);
  --cbp-shadow-level-4-left: -7px 0px 18px 2px rgba(0, 0, 0, 0.3);
  --cbp-shadow-level-5-center: 0px 0px 22px 3px rgba(0, 0, 0, 0.25);
  --cbp-shadow-level-5-up: 0px -10px 22px 3px rgba(0, 0, 0, 0.25);
  --cbp-shadow-level-5-down: 0px 10px 22px 3px rgba(0, 0, 0, 0.25);
  --cbp-shadow-level-5-right: 10px 0px 22px 3px rgba(0, 0, 0, 0.25);
  --cbp-shadow-level-5-left: -10px 0px 22px 3px rgba(0, 0, 0, 0.25);
  --cbp-z-index-level-0: 1;
  --cbp-z-index-level-1: 100;
  --cbp-z-index-level-2: 200;
  --cbp-z-index-level-3: 300;
  --cbp-z-index-level-4: 400;
  --cbp-z-index-level-top: 999;
  --cbp-space-half-x: .125rem;
  --cbp-space-1x: .25rem;
  --cbp-space-2x: .5rem;
  --cbp-space-3x: .75rem;
  --cbp-space-4x: 1rem;
  --cbp-space-5x: 1.25rem;
  --cbp-space-6x: 1.5rem;
  --cbp-space-7x: 1.75rem;
  --cbp-space-8x: 2rem;
  --cbp-space-9x: 2.25rem;
  --cbp-space-10x: 2.5rem;
  --cbp-space-11x: 2.75rem;
  --cbp-space-12x: 3rem;
  --cbp-space-13x: 3.25rem;
  --cbp-space-14x: 3.5rem;
  --cbp-space-15x: 3.75rem;
  --cbp-space-16x: 4rem;
  --cbp-font-family-roboto: "Roboto", Calibri, Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple color emoji", "Segoe UI Emoji", "Segoe Ui Symbol", sans-serif;
  --cbp-font-family-roboto-mono: "Roboto-mono", "Roboto Mono Web", Consolas, "Bitstream Vera Sans Mono", Courier, monospace;
  --cbp-font-size-masthead-1: 2.280rem;
  --cbp-font-size-masthead-2: 2.027rem;
  --cbp-font-size-heading-xxl: 1.802rem;
  --cbp-font-size-heading-xl: 1.602rem;
  --cbp-font-size-heading-lg: 1.424rem;
  --cbp-font-size-heading-md: 1.266rem;
  --cbp-font-size-heading-sm: 1.125rem;
  --cbp-font-size-heading-xs: 1rem;
  --cbp-font-size-body: 0.875rem;
  --cbp-font-size-button: 0.875rem;
  --cbp-font-size-subhead: 0.75rem;
  --cbp-font-weight-black: 900;
  --cbp-font-weight-bold: 700;
  --cbp-font-weight-medium: 500;
  --cbp-font-weight-regular: 400;
  --cbp-font-weight-light: 300;
  --cbp-font-weight-thin: 100;
  --cbp-letter-spacing-loosest: 0.2em;
  --cbp-letter-spacing-loose: 0.12em;
  --cbp-letter-spacing-regular: auto;
  --cbp-line-height-xs: 1.25rem;
  --cbp-line-height-sm: 1.5rem;
  --cbp-line-height-md: 1.75rem;
  --cbp-line-height-lg: 2rem;
  --cbp-line-height-xl: 2.25rem;
  --cbp-line-height-xxl: 2.5rem;
  --cbp-line-height-xxxl: 2.75rem;
  --cbp-line-length-shortest: 44ch;
  --cbp-line-length-short: 60ch;
  --cbp-line-length-medium: 64ch;
  --cbp-line-length-long: 68ch;
  --cbp-line-length-longer: 72ch;
  --cbp-line-length-longest: 88ch;
  --cbp-color-branding-cbp-light: var(--cbp-color-gray-cool-3);
  --cbp-color-branding-cbp-dark: var(--cbp-color-gray-cool-80);
  --cbp-color-info-lighter: var(--cbp-color-blue-cool-10);
  --cbp-color-info-light: var(--cbp-color-blue-cool-30);
  --cbp-color-info-base: var(--cbp-color-blue-cool-50);
  --cbp-color-info-dark: var(--cbp-color-blue-cool-60);
  --cbp-color-info-darker: var(--cbp-color-blue-cool-70);
  --cbp-color-success-lighter: var(--cbp-color-green-10);
  --cbp-color-success-light: var(--cbp-color-green-30);
  --cbp-color-success-base: var(--cbp-color-green-50);
  --cbp-color-success-dark: var(--cbp-color-green-60);
  --cbp-color-success-darker: var(--cbp-color-green-70);
  --cbp-color-warning-lighter: var(--cbp-color-gold-5);
  --cbp-color-warning-light: var(--cbp-color-gold-10);
  --cbp-color-warning-base: var(--cbp-color-gold-20);
  --cbp-color-warning-dark: var(--cbp-color-gold-30);
  --cbp-color-warning-darker: var(--cbp-color-gold-50);
  --cbp-color-danger-lighter: var(--cbp-color-red-10);
  --cbp-color-danger-light: var(--cbp-color-red-30);
  --cbp-color-danger-base: var(--cbp-color-red-50);
  --cbp-color-danger-dark: var(--cbp-color-red-60);
  --cbp-color-danger-darker: var(--cbp-color-red-70);
  --cbp-color-text-lightest: var(--cbp-color-gray-1);
  --cbp-color-text-lighter: var(--cbp-color-gray-5);
  --cbp-color-text-light: var(--cbp-color-gray-20);
  --cbp-color-text-base: var(--cbp-color-gray-30);
  --cbp-color-text-dark: var(--cbp-color-gray-50);
  --cbp-color-text-darker: var(--cbp-color-gray-70);
  --cbp-color-text-darkest: var(--cbp-color-gray-90);
  --cbp-color-highlight: var(--cbp-color-yellow-20);
  --cbp-color-background-light: var(--cbp-color-gray-cool-3);
  --cbp-color-background-dark: var(--cbp-color-gray-cool-80);
  --cbp-color-base-primary-lighter: var(--cbp-color-blue-cool-10);
  --cbp-color-base-primary-light: var(--cbp-color-blue-cool-30);
  --cbp-color-base-primary-base: var(--cbp-color-blue-cool-50);
  --cbp-color-base-primary-dark: var(--cbp-color-blue-cool-60);
  --cbp-color-base-primary-darker: var(--cbp-color-blue-cool-70);
  --cbp-color-base-secondary-lighter: var(--cbp-color-mint-cool-10);
  --cbp-color-base-secondary-light: var(--cbp-color-mint-cool-30);
  --cbp-color-base-secondary-base: var(--cbp-color-mint-cool-50);
  --cbp-color-base-secondary-dark: var(--cbp-color-mint-cool-60);
  --cbp-color-base-secondary-darker: var(--cbp-color-mint-cool-70);
  --cbp-color-base-neutral-lightest: var(--cbp-color-gray-cool-4);
  --cbp-color-base-neutral-lighter: var(--cbp-color-gray-cool-10);
  --cbp-color-base-neutral-light: var(--cbp-color-gray-cool-30);
  --cbp-color-base-neutral-base: var(--cbp-color-gray-cool-50);
  --cbp-color-base-neutral-dark: var(--cbp-color-gray-cool-60);
  --cbp-color-base-neutral-darker: var(--cbp-color-gray-cool-80);
  --cbp-color-base-neutral-darkest: var(--cbp-color-gray-cool-90);
  --cbp-color-interactive-primary-lighter: var(--cbp-color-blue-10);
  --cbp-color-interactive-primary-light: var(--cbp-color-blue-30);
  --cbp-color-interactive-primary-base: var(--cbp-color-blue-50);
  --cbp-color-interactive-primary-dark: var(--cbp-color-blue-60);
  --cbp-color-interactive-primary-darker: var(--cbp-color-blue-70);
  --cbp-color-interactive-secondary-lighter: var(--cbp-color-gray-warm-10);
  --cbp-color-interactive-secondary-light: var(--cbp-color-gray-warm-30);
  --cbp-color-interactive-secondary-base: var(--cbp-color-gray-warm-50);
  --cbp-color-interactive-secondary-dark: var(--cbp-color-gray-warm-60);
  --cbp-color-interactive-secondary-darker: var(--cbp-color-gray-warm-70);
  --cbp-color-interactive-active-light: var(--cbp-color-blue-warm-10);
  --cbp-color-interactive-active-dark: var(--cbp-color-blue-warm-80);
  --cbp-color-interactive-disabled-light: var(--cbp-color-gray-10);
  --cbp-color-interactive-disabled-dark: var(--cbp-color-gray-40);
  --cbp-color-interactive-focus-light: var(--cbp-color-blue-20);
  --cbp-color-interactive-focus-dark: var(--cbp-color-blue-warm-70);
  --cbp-color-interactive-selected-light: var(--cbp-color-blue-warm-20);
  --cbp-color-interactive-selected-dark: var(--cbp-color-blue-warm-60);
  --cbp-color-interactive-visited-light: var(--cbp-color-blue-cool-20);
  --cbp-color-interactive-visited-dark: var(--cbp-color-blue-cool-70);
}