@justeattakeaway/pie-css
Version:
A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.
849 lines • 160 kB
CSS
:root {
/* Global tokens - Color */
--dt-color-aubergine-10: #e7d6e7;
--dt-color-aubergine-30: #b993b8;
--dt-color-aubergine-5: #f3e7f3;
--dt-color-aubergine-75: #493949;
--dt-color-aubergine-80: #3c313c;
--dt-color-berry-10: #fadbdf;
--dt-color-berry-20: #f9d2d7;
--dt-color-berry-70: #98696f;
--dt-color-berry-90: #4c3437;
--dt-color-black: #000;
--dt-color-blue: #125fca;
--dt-color-blue-10: #dbeaff;
--dt-color-blue-25: #c1dade;
--dt-color-blue-30: #7aadf6;
--dt-color-blue-70: #094dac;
--dt-color-blue-90: #083343;
--dt-color-blue-dark-hc: #1054b4;
--dt-color-blue-light-hc: #8bbcfe;
--dt-color-charcoal-30: #d7d9da;
--dt-color-charcoal-40: #b7bdbe;
--dt-color-charcoal-50: #8c999b;
--dt-color-charcoal-57: #68797d;
--dt-color-charcoal-60: #5d7074;
--dt-color-charcoal-70: #3c4c4f;
--dt-color-charcoal-75: #303d3f;
--dt-color-charcoal-80: #242e30;
--dt-color-cupcake-10: #e0ecee;
--dt-color-cupcake-40: #b1cace;
--dt-color-cupcake-70: #6a787a;
--dt-color-cupcake-80: #4c5657;
--dt-color-cupcake-90: #254043;
--dt-color-green: #017a39;
--dt-color-green-10: #cff7e1;
--dt-color-green-30: #22bf65;
--dt-color-green-90: #273f33;
--dt-color-green-dark-hc: #196634;
--dt-color-green-light-hc: #26d46e;
--dt-color-latte-10: #f1e3c9;
--dt-color-latte-30: #e7cda2;
--dt-color-latte-70: #81735b;
--dt-color-mozzarella-10: #f5f3f1;
--dt-color-mozzarella-100: #1a1a19;
--dt-color-mozzarella-20: #efedea;
--dt-color-mozzarella-30: #dbd9d7;
--dt-color-mozzarella-5: #fcfcfc;
--dt-color-mozzarella-50: #9e9c9a;
--dt-color-mozzarella-55: #8b8a88;
--dt-color-mozzarella-60: #797876;
--dt-color-mozzarella-70: #575655;
--dt-color-mozzarella-75: #494847;
--dt-color-mozzarella-80: #3b3a39;
--dt-color-mozzarella-90: #262626;
--dt-color-orange: #f36805;
--dt-color-orange-0: #fff2e5;
--dt-color-orange-10: #fddfc3;
--dt-color-orange-20: #fbc592;
--dt-color-orange-25: #ff9933;
--dt-color-orange-30: #ff8000;
--dt-color-orange-70: #b45512;
--dt-color-orange-75: #a04c00;
--dt-color-orange-90: #613105;
--dt-color-orange-dark-hc: #a33100;
--dt-color-purple: #5b3d5b;
--dt-color-purple-light-hc: #ba98ba;
--dt-color-red: #d50525;
--dt-color-red-10: #ffd3cc;
--dt-color-red-25: #f2a6b0;
--dt-color-red-30: #f68179;
--dt-color-red-40: #e22c3e;
--dt-color-red-90: #491e24;
--dt-color-red-dark-hc: #a4041f;
--dt-color-red-light-hc: #ff7a80;
--dt-color-system-purple: #800080;
--dt-color-system-purple-10: #c58af9;
--dt-color-thirdparty-coop-blue-05: #e4f8fe;
--dt-color-thirdparty-coop-blue-90: #00485c;
--dt-color-thirdparty-facebook-blue: #1877f2;
--dt-color-thirdparty-google-grey-10: #f2f2f2;
--dt-color-thirdparty-google-grey-100: #131314;
--dt-color-thirdparty-google-grey-30: #e3e3e3;
--dt-color-thirdparty-google-grey-50: #8e918f;
--dt-color-thirdparty-google-grey-60: #747775;
--dt-color-thirdparty-google-grey-70: #6a6c6b;
--dt-color-thirdparty-google-grey-90: #1f1f1f;
--dt-color-thirdparty-microsoft-grey-60: #8c8c8c;
--dt-color-thirdparty-microsoft-grey-70: #5e5e5e;
--dt-color-thirdparty-microsoft-grey-80: #2f2f2f;
--dt-color-tomato-100: #31160d;
--dt-color-tomato-30: #ff966d;
--dt-color-tomato-5: #ffd3bf;
--dt-color-tomato-50: #f75e28;
--dt-color-tomato-90: #622b18;
--dt-color-turmeric-10: #fceac0;
--dt-color-turmeric-5: #fdf2d8;
--dt-color-turmeric-60: #b48c32;
--dt-color-turmeric-70: #917228;
--dt-color-turmeric-80: #644f1c;
--dt-color-white: #fff;
--dt-color-yellow: #f6c243;
--dt-color-yellow-10: #fff9df;
--dt-color-yellow-90: #474630;
--dt-color-yellow-dark-hc: #685731;
/* Alias tokens - Color */
/* Default color theme */
--dt-color-background-default: var(--dt-color-mozzarella-5);
--dt-color-background-subtle: var(--dt-color-mozzarella-10);
--dt-color-background-dark: var(--dt-color-mozzarella-100);
--dt-color-container-default: var(--dt-color-white);
--dt-color-container-subtle: var(--dt-color-mozzarella-10);
--dt-color-container-strong: var(--dt-color-mozzarella-20);
--dt-color-container-dark: var(--dt-color-mozzarella-90);
--dt-color-container-light: var(--dt-color-white);
--dt-color-container-inverse: var(--dt-color-mozzarella-90);
--dt-color-container-inverse-alternative: var(--dt-color-mozzarella-90);
--dt-color-border-default: var(--dt-color-mozzarella-20);
--dt-color-border-subtle: var(--dt-color-mozzarella-10);
--dt-color-border-strong: var(--dt-color-mozzarella-30);
--dt-color-border-inverse: var(--dt-color-mozzarella-70);
--dt-color-border-selected: var(--dt-color-mozzarella-50);
--dt-color-border-selected-brand: var(--dt-color-orange);
--dt-color-border-form: var(--dt-color-mozzarella-55);
--dt-color-border-decorative-brand: var(--dt-color-orange-30);
--dt-color-divider-default: rgb(0,0,0,0.08);
--dt-color-divider-inverse: rgb(255,255,255,0.20);
--dt-color-interactive-brand: var(--dt-color-orange);
--dt-color-interactive-primary: var(--dt-color-mozzarella-90);
--dt-color-interactive-secondary: var(--dt-color-mozzarella-10);
--dt-color-interactive-inverse: var(--dt-color-white);
--dt-color-interactive-light: var(--dt-color-white);
--dt-color-interactive-form: var(--dt-color-mozzarella-60);
--dt-color-interactive-error: var(--dt-color-red);
--dt-color-overlay: rgb(0,0,0,0.55);
--dt-color-transparent: rgb(255,255,255,0);
--dt-color-support-error: var(--dt-color-red);
--dt-color-support-warning: var(--dt-color-yellow);
--dt-color-support-positive: var(--dt-color-green);
--dt-color-support-info: var(--dt-color-blue);
--dt-color-support-neutral: var(--dt-color-mozzarella-20);
--dt-color-support-error-02: var(--dt-color-red-10);
--dt-color-support-warning-02: var(--dt-color-yellow-10);
--dt-color-support-positive-02: var(--dt-color-green-10);
--dt-color-support-info-02: var(--dt-color-blue-10);
--dt-color-support-info-inverse: var(--dt-color-blue-30);
--dt-color-support-positive-inverse: var(--dt-color-green-30);
--dt-color-support-neutral-persistent: var(--dt-color-mozzarella-20);
--dt-color-support-error-inverse: var(--dt-color-red-40);
--dt-color-support-warning-inverse: var(--dt-color-yellow);
--dt-color-support-brand-01: var(--dt-color-orange-30);
--dt-color-support-brand-02: var(--dt-color-orange-10);
--dt-color-support-brand-03: var(--dt-color-blue-25);
--dt-color-support-brand-03-subtle: var(--dt-color-cupcake-10);
--dt-color-support-brand-04: var(--dt-color-red-25);
--dt-color-support-brand-04-subtle: var(--dt-color-berry-10);
--dt-color-support-brand-05: var(--dt-color-yellow);
--dt-color-support-brand-05-subtle: var(--dt-color-turmeric-10);
--dt-color-support-brand-06: var(--dt-color-purple);
--dt-color-support-brand-06-subtle: var(--dt-color-aubergine-10);
--dt-color-support-brand-07: var(--dt-color-tomato-50);
--dt-color-support-brand-07-subtle: var(--dt-color-tomato-5);
--dt-color-support-brand-08: var(--dt-color-latte-30);
--dt-color-support-brand-08-subtle: var(--dt-color-latte-10);
--dt-color-braze-container-01: var(--dt-color-orange-10);
--dt-color-braze-container-03: var(--dt-color-cupcake-10);
--dt-color-braze-container-04: var(--dt-color-berry-10);
--dt-color-braze-container-05: var(--dt-color-turmeric-10);
--dt-color-braze-container-08: var(--dt-color-latte-10);
--dt-color-content-default: var(--dt-color-charcoal-80);
--dt-color-content-subdued: var(--dt-color-charcoal-70);
--dt-color-content-interactive-brand: var(--dt-color-orange);
--dt-color-content-interactive-light: var(--dt-color-white);
--dt-color-content-interactive-primary: var(--dt-color-white);
--dt-color-content-interactive-secondary: var(--dt-color-charcoal-80);
--dt-color-content-interactive-tertiary: var(--dt-color-charcoal-75);
--dt-color-content-interactive-subdued: var(--dt-color-charcoal-60);
--dt-color-content-interactive-inverse: var(--dt-color-charcoal-80);
--dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
--dt-color-content-interactive-error: var(--dt-color-red);
--dt-color-content-light: var(--dt-color-white);
--dt-color-content-dark: var(--dt-color-charcoal-80);
--dt-color-content-inverse: var(--dt-color-white);
--dt-color-content-link: var(--dt-color-charcoal-80);
--dt-color-content-link-distinct: var(--dt-color-blue);
--dt-color-content-link-light: var(--dt-color-white);
--dt-color-content-link-inverse: var(--dt-color-white);
--dt-color-content-link-visited: var(--dt-color-system-purple);
--dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
--dt-color-content-error: var(--dt-color-red);
--dt-color-content-placeholder: var(--dt-color-charcoal-57);
--dt-color-content-positive: var(--dt-color-green);
--dt-color-content-disabled: var(--dt-color-charcoal-50);
--dt-color-content-brand: var(--dt-color-orange);
--dt-color-hover-01-bg: #000;
--dt-color-hover-01: 4%;
--dt-color-hover-01-dark-bg: #000;
--dt-color-hover-01-dark: 4%;
--dt-color-hover-02-bg: #fff;
--dt-color-hover-02: 8%;
--dt-color-hover-02-light-bg: #fff;
--dt-color-hover-02-light: 8%;
--dt-color-active-01-bg: #000;
--dt-color-active-01: 12%;
--dt-color-active-01-dark-bg: #000;
--dt-color-active-01-dark: 12%;
--dt-color-active-02-bg: #fff;
--dt-color-active-02: 20%;
--dt-color-active-02-light-bg: #fff;
--dt-color-active-02-light: 20%;
--dt-color-resting-bg: #fff;
--dt-color-resting: 0%;
--dt-color-focus-inner: var(--dt-color-white);
--dt-color-focus-outer: var(--dt-color-blue-70);
--dt-color-disabled-01: var(--dt-color-mozzarella-20);
--dt-color-disabled-01-inverse: var(--dt-color-mozzarella-80);
--dt-color-skeleton-01: var(--dt-color-mozzarella-10);
--dt-color-skeleton-02: var(--dt-color-mozzarella-20);
--dt-color-skeleton-03: var(--dt-color-white);
--dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-5);
--dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-5);
--dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-10);
--dt-color-thirdparty-apple-container-primary: var(--dt-color-black);
--dt-color-thirdparty-apple-content-primary: var(--dt-color-white);
--dt-color-thirdparty-apple-container-secondary: var(--dt-color-white);
--dt-color-thirdparty-apple-content-secondary: var(--dt-color-black);
--dt-color-thirdparty-android-background-dashboard: var(--dt-color-black);
--dt-color-thirdparty-facebook-container-primary: var(--dt-color-thirdparty-facebook-blue);
--dt-color-thirdparty-facebook-content-primary: var(--dt-color-white);
--dt-color-thirdparty-facebook-container-secondary: var(--dt-color-white);
--dt-color-thirdparty-facebook-content-secondary: var(--dt-color-black);
--dt-color-thirdparty-google-container-primary: var(--dt-color-thirdparty-google-grey-100);
--dt-color-thirdparty-google-content-primary: var(--dt-color-thirdparty-google-grey-30);
--dt-color-thirdparty-google-content-primary-subdued: var(--dt-color-thirdparty-google-grey-30);
--dt-color-thirdparty-google-border-primary: var(--dt-color-thirdparty-google-grey-30);
--dt-color-thirdparty-google-container-secondary: var(--dt-color-white);
--dt-color-thirdparty-google-content-secondary: var(--dt-color-thirdparty-google-grey-100);
--dt-color-thirdparty-google-content-secondary-subdued: var(--dt-color-thirdparty-google-grey-70);
--dt-color-thirdparty-google-border-secondary: var(--dt-color-thirdparty-google-grey-60);
--dt-color-thirdparty-microsoft-container-primary: var(--dt-color-white);
--dt-color-thirdparty-microsoft-content-primary: var(--dt-color-thirdparty-microsoft-grey-70);
--dt-color-thirdparty-microsoft-border-primary: var(--dt-color-thirdparty-microsoft-grey-60);
--dt-color-thirdparty-microsoft-container-secondary: var(--dt-color-thirdparty-microsoft-grey-80);
--dt-color-thirdparty-microsoft-content-secondary: var(--dt-color-white);
--dt-color-thirdparty-microsoft-border-secondary-bg: #fff;
--dt-color-thirdparty-microsoft-border-secondary: 0%;
--dt-color-thirdparty-coop-container-primary: var(--dt-color-thirdparty-coop-blue-05);
/* Global tokens - Font */
--dt-font-family-alternative: 'JETSansVF2';
--dt-font-family-code: 'PTMono';
--dt-font-family-primary: 'JetSansDigital';
--dt-font-family-secondary: 'Arial';
--dt-font-paragraph-spacing-01: 16;
--dt-font-paragraph-spacing-02: 14;
--dt-font-paragraph-spacing-03: 12;
/* Size-12 font theme */
--dt-font-size-12: 12;
--dt-font-size-12-line-height: 16;
/* Size-14 font theme */
--dt-font-size-14: 14;
--dt-font-size-14-line-height: 20;
/* Size-16 font theme */
--dt-font-size-16: 16;
--dt-font-size-16-line-height: 24;
/* Size-20 font theme */
--dt-font-size-20: 20;
--dt-font-size-20-line-height: 28;
/* Size-24 font theme */
--dt-font-size-24: 24;
--dt-font-size-24-line-height: 32;
/* Size-28 font theme */
--dt-font-size-28: 28;
--dt-font-size-28-line-height: 36;
/* Size-32 font theme */
--dt-font-size-32: 32;
--dt-font-size-32-line-height: 40;
/* Size-48 font theme */
--dt-font-size-48: 48;
--dt-font-size-48-line-height: 56;
--dt-font-style-italic: italic;
--dt-font-style-underline: underline;
--dt-font-weight-black: 900;
--dt-font-weight-bold: 700;
--dt-font-weight-extrablack: 1000;
--dt-font-weight-extrabold: 800;
--dt-font-weight-regular: 400;
/* Alias tokens - Font */
/* Heading-xs font theme */
--dt-font-heading-xs-size--wide: var(--dt-font-size-16);
--dt-font-heading-xs-size--narrow: var(--dt-font-size-14);
--dt-font-heading-xs-family: var(--dt-font-family-primary);
--dt-font-heading-xs-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-xs-line-height--wide: var(--dt-font-size-16-line-height);
--dt-font-heading-xs-line-height--narrow: var(--dt-font-size-14-line-height);
/* Heading-s font theme */
--dt-font-heading-s-size--wide: var(--dt-font-size-20);
--dt-font-heading-s-size--narrow: var(--dt-font-size-16);
--dt-font-heading-s-family: var(--dt-font-family-primary);
--dt-font-heading-s-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-s-line-height--wide: var(--dt-font-size-20-line-height);
--dt-font-heading-s-line-height--narrow: var(--dt-font-size-16-line-height);
/* Heading-m font theme */
--dt-font-heading-m-size--wide: var(--dt-font-size-24);
--dt-font-heading-m-size--narrow: var(--dt-font-size-20);
--dt-font-heading-m-family: var(--dt-font-family-primary);
--dt-font-heading-m-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-m-line-height--wide: var(--dt-font-size-24-line-height);
--dt-font-heading-m-line-height--narrow: var(--dt-font-size-20-line-height);
/* Heading-l font theme */
--dt-font-heading-l-size--wide: var(--dt-font-size-28);
--dt-font-heading-l-size--narrow: var(--dt-font-size-24);
--dt-font-heading-l-family: var(--dt-font-family-primary);
--dt-font-heading-l-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-l-line-height--wide: var(--dt-font-size-28-line-height);
--dt-font-heading-l-line-height--narrow: var(--dt-font-size-24-line-height);
/* Heading-xl font theme */
--dt-font-heading-xl-size--wide: var(--dt-font-size-32);
--dt-font-heading-xl-size--narrow: var(--dt-font-size-28);
--dt-font-heading-xl-family: var(--dt-font-family-primary);
--dt-font-heading-xl-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-xl-line-height--wide: var(--dt-font-size-32-line-height);
--dt-font-heading-xl-line-height--narrow: var(--dt-font-size-28-line-height);
/* Heading-xxl font theme */
--dt-font-heading-xxl-size--wide: var(--dt-font-size-48);
--dt-font-heading-xxl-size--narrow: var(--dt-font-size-32);
--dt-font-heading-xxl-family: var(--dt-font-family-primary);
--dt-font-heading-xxl-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-xxl-line-height--wide: var(--dt-font-size-48-line-height);
--dt-font-heading-xxl-line-height--narrow: var(--dt-font-size-32-line-height);
/* Heading-s-italic font theme */
--dt-font-heading-s-italic-size--wide: var(--dt-font-size-20);
--dt-font-heading-s-italic-size--narrow: var(--dt-font-size-16);
--dt-font-heading-s-italic-family: var(--dt-font-family-alternative);
--dt-font-heading-s-italic-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-s-italic-font-style: var(--dt-font-style-italic);
--dt-font-heading-s-italic-line-height--wide: var(--dt-font-size-20-line-height);
--dt-font-heading-s-italic-line-height--narrow: var(--dt-font-size-16-line-height);
/* Heading-m-italic font theme */
--dt-font-heading-m-italic-size--wide: var(--dt-font-size-24);
--dt-font-heading-m-italic-size--narrow: var(--dt-font-size-20);
--dt-font-heading-m-italic-family: var(--dt-font-family-alternative);
--dt-font-heading-m-italic-weight: var(--dt-font-weight-black);
--dt-font-heading-m-italic-font-style: var(--dt-font-style-italic);
--dt-font-heading-m-italic-line-height--wide: var(--dt-font-size-24-line-height);
--dt-font-heading-m-italic-line-height--narrow: var(--dt-font-size-20-line-height);
/* Heading-l-italic font theme */
--dt-font-heading-l-italic-size--wide: var(--dt-font-size-28);
--dt-font-heading-l-italic-size--narrow: var(--dt-font-size-24);
--dt-font-heading-l-italic-family: var(--dt-font-family-alternative);
--dt-font-heading-l-italic-weight: var(--dt-font-weight-black);
--dt-font-heading-l-italic-font-style: var(--dt-font-style-italic);
--dt-font-heading-l-italic-line-height--wide: var(--dt-font-size-28-line-height);
--dt-font-heading-l-italic-line-height--narrow: var(--dt-font-size-24-line-height);
/* Heading-xl-italic font theme */
--dt-font-heading-xl-italic-size--wide: var(--dt-font-size-32);
--dt-font-heading-xl-italic-size--narrow: var(--dt-font-size-28);
--dt-font-heading-xl-italic-family: var(--dt-font-family-alternative);
--dt-font-heading-xl-italic-weight: var(--dt-font-weight-extrablack);
--dt-font-heading-xl-italic-font-style: var(--dt-font-style-italic);
--dt-font-heading-xl-italic-line-height--wide: var(--dt-font-size-32-line-height);
--dt-font-heading-xl-italic-line-height--narrow: var(--dt-font-size-28-line-height);
/* Heading-xxl-italic font theme */
--dt-font-heading-xxl-italic-size--wide: var(--dt-font-size-48);
--dt-font-heading-xxl-italic-size--narrow: var(--dt-font-size-32);
--dt-font-heading-xxl-italic-family: var(--dt-font-family-alternative);
--dt-font-heading-xxl-italic-weight: var(--dt-font-weight-extrablack);
--dt-font-heading-xxl-italic-font-style: var(--dt-font-style-italic);
--dt-font-heading-xxl-italic-line-height--wide: var(--dt-font-size-48-line-height);
--dt-font-heading-xxl-italic-line-height--narrow: var(--dt-font-size-32-line-height);
/* Subheading-s font theme */
--dt-font-subheading-s-size--wide: var(--dt-font-size-20);
--dt-font-subheading-s-size--narrow: var(--dt-font-size-16);
--dt-font-subheading-s-family: var(--dt-font-family-primary);
--dt-font-subheading-s-weight: var(--dt-font-weight-regular);
--dt-font-subheading-s-line-height--wide: var(--dt-font-size-20-line-height);
--dt-font-subheading-s-line-height--narrow: var(--dt-font-size-16-line-height);
/* Subheading-l font theme */
--dt-font-subheading-l-size--wide: var(--dt-font-size-24);
--dt-font-subheading-l-size--narrow: var(--dt-font-size-20);
--dt-font-subheading-l-family: var(--dt-font-family-primary);
--dt-font-subheading-l-weight: var(--dt-font-weight-regular);
--dt-font-subheading-l-line-height--wide: var(--dt-font-size-24-line-height);
--dt-font-subheading-l-line-height--narrow: var(--dt-font-size-20-line-height);
/* Interactive-xs font theme */
--dt-font-interactive-xs-size: var(--dt-font-size-14);
--dt-font-interactive-xs-family: var(--dt-font-family-primary);
--dt-font-interactive-xs-weight: var(--dt-font-weight-bold);
--dt-font-interactive-xs-line-height: var(--dt-font-size-14-line-height);
/* Interactive-s font theme */
--dt-font-interactive-s-size: var(--dt-font-size-16);
--dt-font-interactive-s-family: var(--dt-font-family-primary);
--dt-font-interactive-s-weight: var(--dt-font-weight-bold);
--dt-font-interactive-s-line-height: var(--dt-font-size-16-line-height);
/* Interactive-l font theme */
--dt-font-interactive-l-size: var(--dt-font-size-20);
--dt-font-interactive-l-family: var(--dt-font-family-primary);
--dt-font-interactive-l-weight: var(--dt-font-weight-bold);
--dt-font-interactive-l-line-height: var(--dt-font-size-20-line-height);
/* Body-s font theme */
--dt-font-body-s-size: var(--dt-font-size-14);
--dt-font-body-s-family: var(--dt-font-family-primary);
--dt-font-body-s-weight: var(--dt-font-weight-regular);
--dt-font-body-s-paragraph: var(--dt-font-paragraph-spacing-02);
--dt-font-body-s-line-height: var(--dt-font-size-14-line-height);
/* Body-s-link font theme */
--dt-font-body-s-link-size: var(--dt-font-size-14);
--dt-font-body-s-link-family: var(--dt-font-family-primary);
--dt-font-body-s-link-weight: var(--dt-font-weight-regular);
--dt-font-body-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
--dt-font-body-s-link-text-decoration: var(--dt-font-style-underline);
--dt-font-body-s-link-line-height: var(--dt-font-size-14-line-height);
/* Body-l font theme */
--dt-font-body-l-size: var(--dt-font-size-16);
--dt-font-body-l-family: var(--dt-font-family-primary);
--dt-font-body-l-weight: var(--dt-font-weight-regular);
--dt-font-body-l-paragraph: var(--dt-font-paragraph-spacing-01);
--dt-font-body-l-line-height: var(--dt-font-size-16-line-height);
/* Body-l-link font theme */
--dt-font-body-l-link-size: var(--dt-font-size-16);
--dt-font-body-l-link-family: var(--dt-font-family-primary);
--dt-font-body-l-link-weight: var(--dt-font-weight-regular);
--dt-font-body-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
--dt-font-body-l-link-text-decoration: var(--dt-font-style-underline);
--dt-font-body-l-link-line-height: var(--dt-font-size-16-line-height);
/* Body-strong-s font theme */
--dt-font-body-strong-s-size: var(--dt-font-size-14);
--dt-font-body-strong-s-family: var(--dt-font-family-primary);
--dt-font-body-strong-s-weight: var(--dt-font-weight-bold);
--dt-font-body-strong-s-paragraph: var(--dt-font-paragraph-spacing-02);
--dt-font-body-strong-s-line-height: var(--dt-font-size-14-line-height);
/* Body-strong-s-link font theme */
--dt-font-body-strong-s-link-size: var(--dt-font-size-14);
--dt-font-body-strong-s-link-family: var(--dt-font-family-primary);
--dt-font-body-strong-s-link-weight: var(--dt-font-weight-bold);
--dt-font-body-strong-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
--dt-font-body-strong-s-link-text-decoration: var(--dt-font-style-underline);
--dt-font-body-strong-s-link-line-height: var(--dt-font-size-14-line-height);
/* Body-strong-l font theme */
--dt-font-body-strong-l-size: var(--dt-font-size-16);
--dt-font-body-strong-l-family: var(--dt-font-family-primary);
--dt-font-body-strong-l-weight: var(--dt-font-weight-bold);
--dt-font-body-strong-l-paragraph: var(--dt-font-paragraph-spacing-01);
--dt-font-body-strong-l-line-height: var(--dt-font-size-16-line-height);
/* Body-strong-l-link font theme */
--dt-font-body-strong-l-link-size: var(--dt-font-size-16);
--dt-font-body-strong-l-link-family: var(--dt-font-family-primary);
--dt-font-body-strong-l-link-weight: var(--dt-font-weight-bold);
--dt-font-body-strong-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
--dt-font-body-strong-l-link-text-decoration: var(--dt-font-style-underline);
--dt-font-body-strong-l-link-line-height: var(--dt-font-size-16-line-height);
/* Caption font theme */
--dt-font-caption-size: var(--dt-font-size-12);
--dt-font-caption-family: var(--dt-font-family-primary);
--dt-font-caption-weight: var(--dt-font-weight-regular);
--dt-font-caption-paragraph: var(--dt-font-paragraph-spacing-03);
--dt-font-caption-line-height: var(--dt-font-size-12-line-height);
/* Caption-link font theme */
--dt-font-caption-link-size: var(--dt-font-size-12);
--dt-font-caption-link-family: var(--dt-font-family-primary);
--dt-font-caption-link-weight: var(--dt-font-weight-regular);
--dt-font-caption-link-paragraph: var(--dt-font-paragraph-spacing-03);
--dt-font-caption-link-text-decoration: var(--dt-font-style-underline);
--dt-font-caption-link-line-height: var(--dt-font-size-12-line-height);
/* Caption-strong font theme */
--dt-font-caption-strong-size: var(--dt-font-size-12);
--dt-font-caption-strong-family: var(--dt-font-family-primary);
--dt-font-caption-strong-weight: var(--dt-font-weight-bold);
--dt-font-caption-strong-paragraph: var(--dt-font-paragraph-spacing-03);
--dt-font-caption-strong-line-height: var(--dt-font-size-12-line-height);
/* Caption-strong-link font theme */
--dt-font-caption-strong-link-size: var(--dt-font-size-12);
--dt-font-caption-strong-link-family: var(--dt-font-family-primary);
--dt-font-caption-strong-link-weight: var(--dt-font-weight-bold);
--dt-font-caption-strong-link-paragraph: var(--dt-font-paragraph-spacing-03);
--dt-font-caption-strong-link-text-decoration: var(--dt-font-style-underline);
--dt-font-caption-strong-link-line-height: var(--dt-font-size-12-line-height);
/* Global tokens - Radius */
--dt-radius-12: 12px;
--dt-radius-16: 16px;
--dt-radius-00: 0;
--dt-radius-04: 4px;
--dt-radius-08: 8px;
--dt-radius-round: 50rem;
/* Alias tokens - Radius */
--dt-radius-rounded-none: var(--dt-radius-00);
--dt-radius-rounded-a: var(--dt-radius-04);
--dt-radius-rounded-b: var(--dt-radius-08);
--dt-radius-rounded-c: var(--dt-radius-12);
--dt-radius-rounded-d: var(--dt-radius-16);
--dt-radius-rounded-e: var(--dt-radius-round);
/* Global tokens - Motion */
--dt-motion-easing-in: cubic-bezier(0.8, 0, 1, 1);
--dt-motion-easing-out: cubic-bezier(0, 0, 0.18, 0.99);
--dt-motion-easing-persistent-expressive: cubic-bezier(0.95, 0, 0, 0.95);
--dt-motion-easing-persistent-functional: cubic-bezier(0.45, 0, 0.55, 1);
--dt-motion-timing-100: 100ms;
--dt-motion-timing-150: 150ms;
--dt-motion-timing-200: 200ms;
--dt-motion-timing-250: 250ms;
--dt-motion-timing-300: 300ms;
--dt-motion-timing-350: 350ms;
/* Global tokens - Spacing */
--dt-spacing-12: 12px;
--dt-spacing-16: 16px;
--dt-spacing-24: 24px;
--dt-spacing-32: 32px;
--dt-spacing-40: 40px;
--dt-spacing-56: 56px;
--dt-spacing-64: 64px;
--dt-spacing-80: 80px;
--dt-spacing-00: 0;
--dt-spacing-02: 2px;
--dt-spacing-04: 4px;
--dt-spacing-08: 8px;
/* Alias tokens - Spacing */
--dt-spacing-none: var(--dt-spacing-00);
--dt-spacing-a-small: var(--dt-spacing-02);
--dt-spacing-a: var(--dt-spacing-04);
--dt-spacing-b: var(--dt-spacing-08);
--dt-spacing-c: var(--dt-spacing-12);
--dt-spacing-d: var(--dt-spacing-16);
--dt-spacing-e: var(--dt-spacing-24);
--dt-spacing-f: var(--dt-spacing-32);
--dt-spacing-g: var(--dt-spacing-40);
--dt-spacing-h: var(--dt-spacing-56);
--dt-spacing-i: var(--dt-spacing-64);
--dt-spacing-j: var(--dt-spacing-80);
/* Global tokens - Breakpoint */
--dt-breakpoint-size-1024: 1024px;
--dt-breakpoint-size-1280: 1280px;
--dt-breakpoint-size-1440: 1440px;
--dt-breakpoint-size-320: 320px;
--dt-breakpoint-size-600: 600px;
--dt-breakpoint-size-768: 768px;
/* Alias tokens - Breakpoint */
--dt-breakpoint-xs: var(--dt-breakpoint-size-320);
--dt-breakpoint-sm: var(--dt-breakpoint-size-600);
--dt-breakpoint-md: var(--dt-breakpoint-size-768);
--dt-breakpoint-lg: var(--dt-breakpoint-size-1024);
--dt-breakpoint-xl: var(--dt-breakpoint-size-1280);
--dt-breakpoint-xxl: var(--dt-breakpoint-size-1440);
/* Global tokens - Elevation */
--dt-elevation-box-shadow-01: 0px 2px 2px 0px rgba(0, 0, 0, 0.03),0px 3px 1px -2px rgba(0, 0, 0, 0.07),0px 1px 5px 0px rgba(0, 0, 0, 0.06);
--dt-elevation-box-shadow-02: 0px 4px 6px 0px rgba(0, 0, 0, 0.02),0px 2px 12px -2px rgba(0, 0, 0, 0.08),0px 3px 6px 0px rgba(0, 0, 0, 0.06);
--dt-elevation-box-shadow-03: 0px 2px 6px 0px rgba(0, 0, 0, 0.04),0px 8px 12px -2px rgba(0, 0, 0, 0.06),0px 4px 6px 0px rgba(0, 0, 0, 0.04);
--dt-elevation-box-shadow-04: 0px 8px 8px 0px rgba(0, 0, 0, 0.04),0px 8px 20px -3px rgba(0, 0, 0, 0.1),0px 4px 8px -2px rgba(0, 0, 0, 0.06);
--dt-elevation-box-shadow-05: 0px -4px 6px 0px rgba(0, 0, 0, 0.02),0px -2px 12px -2px rgba(0, 0, 0, 0.08),0px -3px 6px 0px rgba(0, 0, 0, 0.06);
--dt-elevation-box-shadow-06: 0px 2px 2px 0px rgba(0, 0, 0, 0.12),0px 3px 1px -2px rgba(0, 0, 0, 0.28),0px 1px 5px 0px rgba(0, 0, 0, 0.24);
--dt-elevation-box-shadow-07: 0px 4px 6px 0px rgba(0, 0, 0, 0.08),0px 2px 12px -2px rgba(0, 0, 0, 0.32),0px 3px 6px 0px rgba(0, 0, 0, 0.24);
--dt-elevation-box-shadow-08: 0px 2px 6px 0px rgba(0, 0, 0, 0.12),0px 8px 12px -2px rgba(0, 0, 0, 0.24),0px 4px 6px 0px rgba(0, 0, 0, 0.16);
--dt-elevation-box-shadow-09: 0px 8px 8px 0px rgba(0, 0, 0, 0.16),0px 3px 20px -3px rgba(0, 0, 0, 0.4),0px 4px 8px -2px rgba(0, 0, 0, 0.24);
--dt-elevation-box-shadow-10: 0px -4px 6px 0px rgba(0, 0, 0, 0.08),0px -2px 12px -2px rgba(0, 0, 0, 0.32),0px -3px 6px 0px rgba(0, 0, 0, 0.24);
--dt-elevation-box-shadow-11: 0px 0px 1px 0px rgba(0, 0, 0, 0.12),0px 1px 5px 0px rgba(0, 0, 0, 0.04),0px 0px 4px 0px rgba(0, 0, 0, 0.1);
--dt-elevation-box-shadow-12: 0px 0px 1px 0px rgba(0, 0, 0, 0.24),0px 1px 5px 0px rgba(0, 0, 0, 0.08),0px 0px 4px 0px rgba(0, 0, 0, 0.16);
--dt-elevation-box-shadow-a: 0px 2px 6px 0px rgba(0, 0, 0, 0.01),0px 2px 12px 0px rgba(0, 0, 0, 0.03),0px 2px 6px 2px rgba(0, 0, 0, 0.02);
--dt-elevation-box-shadow-b: 0px 4px 6px 0px rgba(0, 0, 0, 0.02),0px 2px 12px 2px rgba(0, 0, 0, 0.04),0px 3px 4px 0px rgba(0, 0, 0, 0.04);
--dt-elevation-box-shadow-c: 0px -3px 6px 0px rgba(0, 0, 0, 0.02),0px -2px 12px -2px rgba(0, 0, 0, 0.03),0px -4px 6px 0px rgba(0, 0, 0, 0.01);
--dt-elevation-box-shadow-d: 0px 2px 6px 0px rgba(0, 0, 0, 0.04),0px 2px 12px 0px rgba(0, 0, 0, 0.12),0px 2px 6px 2px rgba(0, 0, 0, 0.08),inset 0px 0.5px 0px 0px rgba(255, 255, 255, 0.05),inset 0px 0px 0.5px 0px rgba(255, 255, 255, 0.05);
--dt-elevation-box-shadow-e: 0px 4px 6px 0px rgba(0, 0, 0, 0.08),0px 2px 12px 2px rgba(0, 0, 0, 0.24),0px 3px 4px 0px rgba(0, 0, 0, 0.16),inset 0px 0.5px 1px 0px rgba(255, 255, 255, 0.08),inset 0px 0px 0.5px 0px rgba(255, 255, 255, 0.12);
--dt-elevation-box-shadow-f: 0px -3px 6px 0px rgba(0, 0, 0, 0.12),0px -2px 12px -2px rgba(0, 0, 0, 0.24),0px -4px 6px 0px rgba(0, 0, 0, 0.06),inset 0px -0.5px 1px 0px rgba(255, 255, 255, 0.08),inset 0px 0px 0.5px 0px rgba(255, 255, 255, 0.12);
/* Alias tokens - Elevation */
--dt-elevation-below-10: var(--dt-elevation-box-shadow-a);
--dt-elevation-below-20: var(--dt-elevation-box-shadow-b);
--dt-elevation-above-20: var(--dt-elevation-box-shadow-c);
--dt-elevation-inverse-below-10: var(--dt-elevation-box-shadow-d);
--dt-elevation-inverse-below-20: var(--dt-elevation-box-shadow-e);
--dt-elevation-inverse-above-20: var(--dt-elevation-box-shadow-f);
--dt-elevation-01: var(--dt-elevation-box-shadow-01);
--dt-elevation-02: var(--dt-elevation-box-shadow-02);
--dt-elevation-03: var(--dt-elevation-box-shadow-03);
--dt-elevation-04: var(--dt-elevation-box-shadow-04);
--dt-elevation-05: var(--dt-elevation-box-shadow-05);
--dt-elevation-card: var(--dt-elevation-box-shadow-11);
--dt-elevation-inverse-01: var(--dt-elevation-box-shadow-06);
--dt-elevation-inverse-02: var(--dt-elevation-box-shadow-07);
--dt-elevation-inverse-03: var(--dt-elevation-box-shadow-08);
--dt-elevation-inverse-04: var(--dt-elevation-box-shadow-09);
--dt-elevation-inverse-05: var(--dt-elevation-box-shadow-10);
--dt-elevation-inverse-card: var(--dt-elevation-box-shadow-12);
/* Global tokens - Gradient */
/* Alias tokens - Gradient */
/* Default gradient theme */
--dt-gradient-jetplus-brand-01: linear-gradient(140deg, var(--dt-color-orange-25) 0%, var(--dt-color-orange-30) 40%, var(--dt-color-tomato-50) 100%);
--dt-gradient-jetplus-brand-02: linear-gradient(140deg, var(--dt-color-orange-10) 0%, var(--dt-color-orange-20) 40%, var(--dt-color-tomato-30) 100%);
--dt-gradient-jetplus-brand-03: linear-gradient(140deg, var(--dt-color-orange-0) 0%, var(--dt-color-orange-10) 40%, var(--dt-color-tomato-5) 100%);
--dt-gradient-jetplus-support-01: linear-gradient(180deg, var(--dt-color-mozzarella-20) 0%, var(--dt-color-mozzarella-5) 40%, var(--dt-color-mozzarella-5) 100%);
--dt-gradient-jetplus-support-02: linear-gradient(180deg, var(--dt-color-orange-10) 0%, var(--dt-color-transparent) 40%, var(--dt-color-transparent) 100%);
--dt-gradient-ai-container-default: linear-gradient(140deg, var(--dt-color-cupcake-10) 40%, var(--dt-color-aubergine-5) 100%);
--dt-gradient-ai-border-default: linear-gradient(140deg, var(--dt-color-cupcake-40) 40%, var(--dt-color-aubergine-30) 100%);
}
/* Highcontrast color theme */
html[data-highcontrast-enabled] {
--dt-color-background-default: var(--dt-color-white);
--dt-color-background-subtle: var(--dt-color-white);
--dt-color-background-dark: var(--dt-color-black);
--dt-color-container-default: var(--dt-color-white);
--dt-color-container-subtle: var(--dt-color-white);
--dt-color-container-strong: var(--dt-color-white);
--dt-color-container-dark: var(--dt-color-black);
--dt-color-container-light: var(--dt-color-white);
--dt-color-container-inverse: var(--dt-color-black);
--dt-color-container-inverse-alternative: var(--dt-color-black);
--dt-color-border-default: var(--dt-color-black);
--dt-color-border-subtle: var(--dt-color-black);
--dt-color-border-strong: var(--dt-color-black);
--dt-color-border-inverse: var(--dt-color-white);
--dt-color-border-selected: var(--dt-color-black);
--dt-color-border-selected-brand: var(--dt-color-orange-dark-hc);
--dt-color-border-form: var(--dt-color-black);
--dt-color-border-decorative-brand: var(--dt-color-orange-30);
--dt-color-divider-default: var(--dt-color-black);
--dt-color-divider-inverse: var(--dt-color-white);
--dt-color-interactive-brand: var(--dt-color-orange-dark-hc);
--dt-color-interactive-primary: var(--dt-color-black);
--dt-color-interactive-secondary: var(--dt-color-white);
--dt-color-interactive-inverse: var(--dt-color-white);
--dt-color-interactive-light: var(--dt-color-white);
--dt-color-interactive-form: var(--dt-color-black);
--dt-color-interactive-error: var(--dt-color-red);
--dt-color-overlay: rgb(0,0,0,0.55);
--dt-color-transparent: rgb(255,255,255,0);
--dt-color-support-error: var(--dt-color-red-dark-hc);
--dt-color-support-warning: var(--dt-color-yellow-dark-hc);
--dt-color-support-positive: var(--dt-color-green-dark-hc);
--dt-color-support-info: var(--dt-color-blue-dark-hc);
--dt-color-support-neutral: var(--dt-color-white);
--dt-color-support-error-02: var(--dt-color-white);
--dt-color-support-warning-02: var(--dt-color-white);
--dt-color-support-positive-02: var(--dt-color-white);
--dt-color-support-info-02: var(--dt-color-white);
--dt-color-support-info-inverse: var(--dt-color-blue-light-hc);
--dt-color-support-positive-inverse: var(--dt-color-green-light-hc);
--dt-color-support-neutral-persistent: var(--dt-color-white);
--dt-color-support-error-inverse: var(--dt-color-red-light-hc);
--dt-color-support-warning-inverse: var(--dt-color-yellow);
--dt-color-support-brand-01: var(--dt-color-orange-30);
--dt-color-support-brand-02: var(--dt-color-white);
--dt-color-support-brand-03: var(--dt-color-white);
--dt-color-support-brand-03-subtle: var(--dt-color-cupcake-10);
--dt-color-support-brand-04: var(--dt-color-white);
--dt-color-support-brand-04-subtle: var(--dt-color-berry-10);
--dt-color-support-brand-05: var(--dt-color-white);
--dt-color-support-brand-05-subtle: var(--dt-color-yellow-10);
--dt-color-support-brand-06: var(--dt-color-white);
--dt-color-support-brand-06-subtle: var(--dt-color-aubergine-10);
--dt-color-support-brand-07: var(--dt-color-white);
--dt-color-support-brand-07-subtle: var(--dt-color-tomato-5);
--dt-color-support-brand-08: var(--dt-color-white);
--dt-color-support-brand-08-subtle: var(--dt-color-latte-10);
--dt-color-braze-container-01: var(--dt-color-orange-10);
--dt-color-braze-container-03: var(--dt-color-cupcake-10);
--dt-color-braze-container-04: var(--dt-color-berry-10);
--dt-color-braze-container-05: var(--dt-color-turmeric-10);
--dt-color-braze-container-08: var(--dt-color-latte-10);
--dt-color-content-default: var(--dt-color-black);
--dt-color-content-subdued: var(--dt-color-black);
--dt-color-content-interactive-brand: var(--dt-color-orange-dark-hc);
--dt-color-content-interactive-light: var(--dt-color-white);
--dt-color-content-interactive-primary: var(--dt-color-white);
--dt-color-content-interactive-secondary: var(--dt-color-black);
--dt-color-content-interactive-tertiary: var(--dt-color-black);
--dt-color-content-interactive-subdued: var(--dt-color-black);
--dt-color-content-interactive-inverse: var(--dt-color-black);
--dt-color-content-interactive-dark: var(--dt-color-black);
--dt-color-content-interactive-error: var(--dt-color-red-dark-hc);
--dt-color-content-light: var(--dt-color-white);
--dt-color-content-dark: var(--dt-color-black);
--dt-color-content-inverse: var(--dt-color-white);
--dt-color-content-link: var(--dt-color-black);
--dt-color-content-link-distinct: var(--dt-color-blue);
--dt-color-content-link-light: var(--dt-color-white);
--dt-color-content-link-inverse: var(--dt-color-white);
--dt-color-content-link-visited: var(--dt-color-system-purple);
--dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
--dt-color-content-error: var(--dt-color-red-dark-hc);
--dt-color-content-placeholder: var(--dt-color-charcoal-57);
--dt-color-content-positive: var(--dt-color-green-dark-hc);
--dt-color-content-disabled: var(--dt-color-charcoal-50);
--dt-color-content-brand: var(--dt-color-orange-dark-hc);
--dt-color-hover-01-bg: #000;
--dt-color-hover-01: 4%;
--dt-color-hover-01-dark-bg: #000;
--dt-color-hover-01-dark: 4%;
--dt-color-hover-02-bg: #fff;
--dt-color-hover-02: 8%;
--dt-color-hover-02-light-bg: #fff;
--dt-color-hover-02-light: 8%;
--dt-color-active-01-bg: #000;
--dt-color-active-01: 12%;
--dt-color-active-01-dark-bg: #000;
--dt-color-active-01-dark: 12%;
--dt-color-active-02-bg: #fff;
--dt-color-active-02: 20%;
--dt-color-active-02-light-bg: #fff;
--dt-color-active-02-light: 20%;
--dt-color-resting-bg: #fff;
--dt-color-resting: 0%;
--dt-color-focus-inner: var(--dt-color-white);
--dt-color-focus-outer: var(--dt-color-blue-70);
--dt-color-disabled-01: var(--dt-color-mozzarella-20);
--dt-color-disabled-01-inverse: var(--dt-color-mozzarella-80);
--dt-color-skeleton-01: var(--dt-color-mozzarella-10);
--dt-color-skeleton-02: var(--dt-color-mozzarella-20);
--dt-color-skeleton-03: var(--dt-color-white);
--dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-5);
--dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-5);
--dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-10);
}
/* Dark color theme */
@media (prefers-color-scheme: dark) {
html[data-darkmode-enabled] {
--dt-color-background-default: var(--dt-color-mozzarella-100);
--dt-color-background-subtle: var(--dt-color-mozzarella-80);
--dt-color-background-dark: var(--dt-color-white);
--dt-color-container-default: var(--dt-color-mozzarella-90);
--dt-color-container-subtle: var(--dt-color-mozzarella-80);
--dt-color-container-strong: var(--dt-color-mozzarella-70);
--dt-color-container-dark: var(--dt-color-mozzarella-90);
--dt-color-container-light: var(--dt-color-white);
--dt-color-container-inverse: var(--dt-color-white);
--dt-color-container-inverse-alternative: var(--dt-color-mozzarella-70);
--dt-color-border-default: var(--dt-color-mozzarella-70);
--dt-color-border-subtle: var(--dt-color-mozzarella-75);
--dt-color-border-strong: var(--dt-color-mozzarella-60);
--dt-color-border-inverse: var(--dt-color-mozzarella-20);
--dt-color-border-selected: var(--dt-color-mozzarella-30);
--dt-color-border-selected-brand: var(--dt-color-orange);
--dt-color-border-form: var(--dt-color-mozzarella-50);
--dt-color-border-decorative-brand: var(--dt-color-orange-30);
--dt-color-divider-default: rgb(255,255,255,0.20);
--dt-color-divider-inverse: rgb(0,0,0,0.08);
--dt-color-interactive-brand: var(--dt-color-orange);
--dt-color-interactive-primary: var(--dt-color-white);
--dt-color-interactive-secondary: var(--dt-color-mozzarella-75);
--dt-color-interactive-inverse: var(--dt-color-mozzarella-90);
--dt-color-interactive-light: var(--dt-color-white);
--dt-color-interactive-form: var(--dt-color-mozzarella-50);
--dt-color-interactive-error: var(--dt-color-red-40);
--dt-color-overlay: rgb(0,0,0,0.55);
--dt-color-transparent: rgb(255,255,255,0);
--dt-color-support-error: var(--dt-color-red-40);
--dt-color-support-warning: var(--dt-color-yellow);
--dt-color-support-positive: var(--dt-color-green-30);
--dt-color-support-info: var(--dt-color-blue-30);
--dt-color-support-neutral: var(--dt-color-mozzarella-100);
--dt-color-support-error-02: var(--dt-color-red-90);
--dt-color-support-warning-02: var(--dt-color-yellow-90);
--dt-color-support-positive-02: var(--dt-color-green-90);
--dt-color-support-info-02: var(--dt-color-blue-90);
--dt-color-support-info-inverse: var(--dt-color-blue);
--dt-color-support-positive-inverse: var(--dt-color-green);
--dt-color-support-neutral-persistent: var(--dt-color-mozzarella-20);
--dt-color-support-error-inverse: var(--dt-color-red);
--dt-color-support-warning-inverse: var(--dt-color-turmeric-60);
--dt-color-support-brand-01: var(--dt-color-orange-30);
--dt-color-support-brand-02: var(--dt-color-orange-75);
--dt-color-support-brand-03: var(--dt-color-blue-25);
--dt-color-support-brand-03-subtle: var(--dt-color-cupcake-70);
--dt-color-support-brand-04: var(--dt-color-red-25);
--dt-color-support-brand-04-subtle: var(--dt-color-berry-70);
--dt-color-support-brand-05: var(--dt-color-yellow);
--dt-color-support-brand-05-subtle: var(--dt-color-turmeric-70);
--dt-color-support-brand-06: var(--dt-color-purple);
--dt-color-support-brand-06-subtle: var(--dt-color-aubergine-75);
--dt-color-support-brand-07: var(--dt-color-tomato-50);
--dt-color-support-brand-07-subtle: var(--dt-color-tomato-90);
--dt-color-support-brand-08: var(--dt-color-latte-30);
--dt-color-support-brand-08-subtle: var(--dt-color-latte-70);
--dt-color-braze-container-01: var(--dt-color-orange-75);
--dt-color-braze-container-03: var(--dt-color-cupcake-70);
--dt-color-braze-container-04: var(--dt-color-berry-70);
--dt-color-braze-container-05: var(--dt-color-turmeric-70);
--dt-color-braze-container-08: var(--dt-color-latte-70);
--dt-color-content-default: var(--dt-color-white);
--dt-color-content-subdued: var(--dt-color-charcoal-30);
--dt-color-content-interactive-brand: var(--dt-color-orange-30);
--dt-color-content-interactive-light: var(--dt-color-white);
--dt-color-content-interactive-primary: var(--dt-color-charcoal-80);
--dt-color-content-interactive-secondary: var(--dt-color-white);
--dt-color-content-interactive-tertiary: var(--dt-color-white);
--dt-color-content-interactive-subdued: var(--dt-color-charcoal-40);
--dt-color-content-interactive-inverse: var(--dt-color-white);
--dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
--dt-color-content-interactive-error: var(--dt-color-red-30);
--dt-color-content-light: var(--dt-color-white);
--dt-color-content-dark: var(--dt-color-charcoal-80);
--dt-color-content-inverse: var(--dt-color-charcoal-80);
--dt-color-content-link: var(--dt-color-white);
--dt-color-content-link-distinct: var(--dt-color-blue-30);
--dt-color-content-link-light: var(--dt-color-white);
--dt-color-content-link-inverse: var(--dt-color-charcoal-80);
--dt-color-content-link-visited: var(--dt-color-system-purple-10);
--dt-color-content-link-visited-inverse: var(--dt-color-system-purple);
--dt-color-content-error: var(--dt-color-red-30);
--dt-color-content-placeholder: var(--dt-color-charcoal-50);
--dt-color-content-positive: var(--dt-color-green-30);
--dt-color-content-disabled: var(--dt-color-charcoal-50);
--dt-color-content-brand: var(--dt-color-orange-30);
--dt-color-hover-01-bg: #fff;
--dt-color-hover-01: 8%;
--dt-color-hover-01-dark-bg: #000;
--dt-color-hover-01-dark: 4%;
--dt-color-hover-02-bg: #000;
--dt-color-hover-02: 4%;
--dt-color-hover-02-light-bg: #fff;
--dt-color-hover-02-light: 8%;
--dt-color-active-01-bg: #fff;
--dt-color-active-01: 20%;
--dt-color-active-01-dark-bg: #000;
--dt-color-active-01-dark: 12%;
--dt-color-active-02-bg: #000;
--dt-color-active-02: 12%;
--dt-color-active-02-light-bg: #fff;
--dt-color-active-02-light: 20%;
--dt-color-resting-bg: #000;
--dt-color-resting: 0%;
--dt-color-focus-inner: var(--dt-color-black);
--dt-color-focus-outer: var(--dt-color-blue-30);
--dt-color-disabled-01: var(--dt-color-mozzarella-80);
--dt-color-disabled-01-inverse: var(--dt-color-mozzarella-20);
--dt-color-skeleton-01: var(--dt-color-mozzarella-80);
--dt-color-skeleton-02: var(--dt-color-mozzarella-75);
--dt-color-skeleton-03: var(--dt-color-mozzarella-90);
--dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-75);
--dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-70);
--dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-80);
--dt-color-thirdparty-apple-container-primary: var(--dt-color-white);
--dt-color-thirdparty-apple-content-primary: var(--dt-color-black);
--dt-color-thirdparty-apple-container-secondary: var(--dt-color-black);
--dt-color-thirdparty-apple-content-secondary: var(--dt-color-white);
--dt-color-thirdparty-android-background-dashboard: var(--dt-color-black);
--dt-color-thirdparty-facebook-container-primary: var(--dt-color-thirdparty-facebook-blue);
--dt-color-thirdparty-facebook-content-primary: var(--dt-color-white);
--dt-color-thirdparty-facebook-container-secondary: var(--dt-color-black);
--dt-color-thirdparty-facebook-content-secondary: var(--dt-color-white);
--dt-color-thirdparty-google-container-primary: var(--dt-color-thirdparty-google-grey-100);
--dt-color-thirdparty-google-content-primary: var(--dt-color-thirdparty-google-grey-30);
--dt-color-thirdparty-google-content-primary-subdued: var(--dt-color-thirdparty-google-grey-30);
--dt-color-thirdparty-google-border-primary: var(--dt-color-thirdparty-google-grey-30);
--dt-color-thirdparty-google-container-secondary: var(--dt-color-white);
--dt-color-thirdparty-google-content-secondary: var(--dt-color-thirdparty-google-grey-100);
--dt-color-thirdparty-google-content-secondary-subdued: var(--dt-color-thirdparty-google-grey-70);
--dt-color-thirdparty-google-border-secondary: var(--dt-color-thirdparty-google-grey-60);
--dt-color-thirdparty-microsoft-container-primary: var(--dt-color-thirdparty-microsoft-grey-80);
--dt-color-thirdparty-microsoft-content-primary: var(--dt-color-white);
--dt-color-thirdparty-microsoft-border-primary-bg: #000;
--dt-color-thirdparty-microsoft-border-primary: 0%;
--dt-color-thirdparty-microsoft-container-secondary: var(--dt-color-white);
--dt-color-thirdparty-microsoft-content-secondary: var(--dt-color-thirdparty-microsoft-grey-70);
--dt-color-thirdparty-microsoft-border-secondary: var(--dt-color-thirdparty-microsoft-gre