/* Mirrors the MDDS design system ("MDDS ยท 01 Foundations (tokens & styles)", Figma). Do not edit by hand: change it in the DS and sync here. */ :root { /* ======================================== * Semantic Colors * ====================================== */ /* CONTENT */ --md-content-primary: var(--md-color-neutral-70); --md-content-secondary: var(--md-color-neutral-60); --md-content-tertiary: var(--md-color-neutral-50); --md-content-primary-inverse: var(--md-color-neutral-0); --md-content-secondary-inverse: var(--md-color-neutral-2); --md-content-tertiary-inverse: var(--md-color-neutral-7); --md-content-disabled: var(--md-color-neutral-30); --md-content-brand-primary: var(--md-color-brand-primary-60); --md-content-brand-secondary: var(--md-color-brand-secondary-60); --md-content-vivid: var(--md-color-brand-secondary-70); --md-content-vivid-hover: var(--md-color-brand-secondary-90); --md-content-vivid-pressed: var(--md-color-brand-secondary-80); --md-content-info: var(--md-color-blue-70); --md-content-info-bold: var(--md-color-blue-80); --md-content-notice: var(--md-color-yellow-60); --md-content-notice-bold: var(--md-color-yellow-80); --md-content-caution: var(--md-color-orange-70); --md-content-caution-bold: var(--md-color-orange-90); --md-content-positive: var(--md-color-green-80); --md-content-positive-bold: var(--md-color-green-95); --md-content-negative: var(--md-color-red-80); --md-content-negative-bold: var(--md-color-red-95); --md-content-discovery: var(--md-color-purple-80); --md-content-discovery-bold: var(--md-color-purple-95); /* BACKGROUND */ --md-background-primary: var(--md-color-neutral-0); --md-background-hover: var(--md-color-neutral-2); --md-background-pressed: var(--md-color-neutral-5); --md-background-selected: var(--md-color-neutral-2); --md-background-disabled: var(--md-color-neutral-5); --md-background-darkest: var(--md-color-neutral-100); --md-background-primary-inverse: var(--md-color-neutral-80); --md-background-secondary-inverse: var(--md-color-neutral-70); --md-background-tertiary-inverse: var(--md-color-neutral-60); --md-background-secondary: var(--md-color-neutral-2); --md-background-secondary-subtle: var(--md-color-neutral-1); --md-background-secondary-hover: var(--md-color-neutral-5); --md-background-secondary-pressed: var(--md-color-neutral-10); --md-background-secondary-selected: var(--md-color-neutral-5); --md-background-tertiary: var(--md-color-brand-secondary-5); --md-background-tertiary-subtle: var(--md-color-brand-secondary-2); --md-background-tertiary-hover: var(--md-color-brand-secondary-20); --md-background-tertiary-pressed: var(--md-color-brand-secondary-20); --md-background-tertiary-selected: var(--md-color-brand-secondary-5); --md-background-brand: var(--md-color-brand-primary-60); --md-background-brand-hover: var(--md-color-brand-primary-80); --md-background-brand-pressed: var(--md-color-brand-primary-90); --md-background-brand-selected: var(--md-color-brand-primary-70); --md-background-info: var(--md-color-blue-70); --md-background-info-subtle: var(--md-color-blue-2); --md-background-notice: var(--md-color-yellow-60); --md-background-notice-subtle: var(--md-color-yellow-2); --md-background-caution: var(--md-color-orange-60); --md-background-caution-subtle: var(--md-color-orange-2); --md-background-positive: var(--md-color-green-70); --md-background-positive-subtle: var(--md-color-green-2); --md-background-negative: var(--md-color-red-70); --md-background-negative-subtle: var(--md-color-red-2); --md-background-discovery: var(--md-color-purple-70); --md-background-discovery-subtle: var(--md-color-purple-2); /* BORDER */ --md-border-primary: var(--md-color-neutral-15); --md-border-subtle: var(--md-color-neutral-5); --md-border-secondary: var(--md-color-neutral-20); --md-border-tertiary: var(--md-color-neutral-40); --md-border-disabled: var(--md-color-neutral-15); --md-border-brand: var(--md-color-brand-primary-60); --md-border-brand-secondary: var(--md-color-brand-secondary-60); --md-border-inverse: var(--md-color-neutral-0); --md-border-focus: var(--md-color-blue-70); --md-border-info: var(--md-color-blue-40); --md-border-notice: var(--md-color-yellow-20); --md-border-caution: var(--md-color-orange-20); --md-border-positive: var(--md-color-green-10); --md-border-negative: var(--md-color-red-20); --md-border-discovery: var(--md-color-purple-30); --md-border-high-contrast: var(--md-color-neutral-80); /* ELEVATION */ --md-elevation-none: var(--md-color-base-black-alpha-0); --md-elevation-xs: var(--md-color-base-black-alpha-8); --md-elevation-sm: var(--md-color-base-black-alpha-10); --md-elevation-mn: var(--md-color-base-black-alpha-12); --md-elevation-lg: var(--md-color-base-black-alpha-16); --md-elevation-xl: var(--md-color-base-black-alpha-20); --md-elevation-edge: var(--md-color-base-black-alpha-8); /* GRADIENT */ --md-gradient-brand-primary: var(--md-color-brand-primary-60); --md-gradient-brand-secondary: var(--md-color-brand-secondary-60); --md-gradient-ai-vital: var(--md-color-green-60); --md-gradient-ai-neural: var(--md-color-blue-60); /* OVERLAY */ --md-overlay-dark-none: var(--md-color-base-black-alpha-0); --md-overlay-dark-xs: var(--md-color-base-black-alpha-20); --md-overlay-dark-sm: var(--md-color-base-black-alpha-40); --md-overlay-dark-mn: var(--md-color-base-black-alpha-60); --md-overlay-dark-lg: var(--md-color-base-black-alpha-80); --md-overlay-dark-xl: var(--md-color-base-black-alpha-100); --md-overlay-light-none: var(--md-color-base-white-alpha-0); --md-overlay-light-xs: var(--md-color-base-white-alpha-20); --md-overlay-light-sm: var(--md-color-base-white-alpha-40); --md-overlay-light-mn: var(--md-color-base-white-alpha-60); --md-overlay-light-lg: var(--md-color-base-white-alpha-80); --md-overlay-light-xl: var(--md-color-base-white-alpha-100); }