/**
 * Do not edit directly, this file was auto-generated.
 */

[data-eds-theme="dark"] {
  --eds-color-text-primary: #faf6f0; /** use in headers, labels, regular-weight body text in certain cases */
  --eds-color-text-primary-hover: #e0dcd7; /** use as text color for quaternary button hover state */
  --eds-color-text-primary-pressed: #d0ccc8; /** use as text color for quaternary button active state */
  --eds-color-text-secondary: #d0ccc8; /** use for subtitles, eyebrows, regular weight body text in certain case */
  --eds-color-text-tertiary: #b3b2b1; /** use for subtitles, eyebrows, regular weight body text in certain case. */
  --eds-color-text-brand-on-bold: #241f7a; /** use as text color for bold indigo tags, message cards (?), and banners that have ‘brand’ meaning; paired with brand-on-bold icon color, brand-on-bold border color, and brand-bold bg color */
  --eds-color-text-brand-on-subtle: #dcdcfe; /** use as text color for subtle indigo tags, message cards (?), and banners that have ‘brand’ meaning; paired with brand-on-subtle icon color, brand-on-subtle border color, and brand-subtle bg color */
  --eds-color-text-info-on-subtle: #cfdffb; /** use as text color for subtle indigo tags, message cards (?), and banners that have ‘brand’ meaning; paired with brand-on-subtle icon color, brand-on-subtle border color, and brand-subtle bg color */
  --eds-color-text-success-on-subtle: #c2fad1; /** use as text color for subtle success tags and banners that have ‘success’ meaning; paired with success-on-subtle icon color, success-on-subtle border color, and success-subtle bg color */
  --eds-color-text-warning-on-bold: #753700; /** use as text color for bold warning tags and banners that have ‘warning’ meaning; paired with warning-on-bold icon color, warning-on-bold border color, and warning-bold bg color */
  --eds-color-text-warning-on-subtle: #ffdaa3; /** use as text color for subtle warning tags and banners that have ‘warning’ meaning; paired with warning-on-subtle icon color, warning-on-subtle border color, and warning-subtle bg color */
  --eds-color-text-error-on-subtle: #ffd4cc; /** use as text color for subtle attention/error tags and banners that have ‘error’ meaning; paired with error-on-subtle icon color, error-on-subtle border color, and error-subtle bg color */
  --eds-color-text-accent-inverse: #1d1d1f; /** use as text color on a dark surface, ie. icons in a brand, primary, and destructive buttons, or text in a tooltip or toast */
  --eds-color-text-accent-primary-on-bold: #ffffff; /** Use as text color given that text is on a brand or dark background. ie. text in a brand button or toast. May use when text is on a bold background if, the text needs to stay the same color in light and dark mode */
  --eds-color-text-accent-secondary-on-bold: #d0ccc8; /** Use as text color given that text is on a dark background. ie. description text in a tooltip. May use when text is on a dark background if, the text needs to stay the same color in light and dark mode */
  --eds-color-text-accent-yellow-on-bold: #704b00; /** use as text color for bold orange tags, thumbnails, banners, message cards (?) with no meaning; paired with orange-on-bold icon color, orange-on-bold border color, and/or orange-bold bg color */
  --eds-color-text-accent-yellow-on-subtle: #ffeaad; /** use as text color for subtle orange tags, thumbnails, banners, message cards (?) with no meaning; paired with orange-on-subtle icon color, orange-on-subtle border color, and/or orange-subtle bg color */
  --eds-color-text-accent-lime-on-bold: #224200; /** use as text color for bold lime tags, thumbnails, banners, message cards (?) with no meaning; paired with lime-on-bold icon color, lime-on-bold border color, and/or lime-bold bg color */
  --eds-color-text-accent-lime-on-subtle: #cdf6b1; /** use as text color for subtle lime tags, thumbnails, banners, message cards (?) with no meaning; paired with lime-on-subtle icon color, lime-on-subtle border color, and/or lime-subtle bg color */
  --eds-color-text-accent-teal-on-bold: #003b3a; /** use as text color for bold teal tags, thumbnails, banners, message cards (?) with no meaning; paired with teal-on-bold icon color, teal-on-bold border color, and/or teal-bold bg color */
  --eds-color-text-accent-teal-on-subtle: #b1f6f2; /** use as text color for subtle teal tags, thumbnails, banners, message cards (?) with no meaning; paired with teal-on-subtle icon color, teal-on-subtle border color, and/or teal-subtle bg color */
  --eds-color-text-accent-blue-on-bold: #01384d; /** use as text color for bold blue tags, thumbnails, banners, message cards (?) with no meaning; paired with teal-on-bold icon color, teal-on-bold border color, and/or teal-bold bg color */
  --eds-color-text-accent-blue-on-subtle: #d6f1ff; /** use as text color for subtle blue tags, thumbnails, banners, message cards (?) with no meaning; paired with blue-on-subtle icon color, blue-on-subtle border color, and/or blue-subtle bg color */
  --eds-color-text-accent-purple-on-bold: #441a6d; /** use as text color for bold purple tags, thumbnails, banners, message cards (?) with no meaning; paired with purple-on-bold icon color, purple-on-bold border color, and/or purple-bold bg color */
  --eds-color-text-accent-purple-on-subtle: #eedeff; /** use as text color for subtle purple tags, thumbnails, banners, message cards (?) with no meaning; paired with purple-on-subtle icon color, purple-on-subtle border color, and/or purple-subtle bg color */
  --eds-color-text-accent-pink-on-bold: #750035; /** use as text color for bold pink tags, thumbnails, banners, message cards (?) with no meaning; paired with pink-on-bold icon color, pink-on-bold border color, and/or pink-bold bg color */
  --eds-color-text-accent-pink-on-subtle: #ffd1e4; /** use as text color for subtle pink tags, thumbnails, banners, message cards (?) with no meaning; paired with pink-on-subtle icon color, pink-on-subtle border color, and/or pink-subtle bg color */
  --eds-color-text-input-error: #f14638; /** Use as hint text color for form field error state; paired with icon-input-error color, border-input-error color */
  --eds-color-text-link-default: #b7b6fb; /** use as text color for the default state of link (inline in a paragraph) */
  --eds-color-text-link-hover: #b7b6fb; /** use as text color for the hover state of link (inline in a paragraph) */
  --eds-color-text-link-active: #918fff; /** use as text color for the active state of link (inline in a paragraph) */
  --eds-color-text-link-visited: #d1d0fb; /** use as text color for the visited state of link (inline in a paragraph) */
  --eds-color-surface-primary: #141415; /** use for content rich page backgrounds, given that the page doesn't have many floaty elements (ie not many cards, sheets, etc.); use as default state color for certain components that have large surface areas like modal, sheet, popover, and card; use as container color above surface-secondary */
  --eds-color-surface-primary-or-secondary-hover: #262627; /** use as hover state color for card component */
  --eds-color-surface-primary-or-secondary-pressed: #49494b; /** use as active state color for card component */
  --eds-color-surface-secondary: #1d1d1f; /** use for dashboard or less-busy page backgrounds, given that the page has floaty components (ie. cards, a documents area); use as container color when layered above surface-primary */
  --eds-color-surface-tertiary: #262627; /** use as container color when layered above surface-secondary */
  --eds-color-surface-paper-primary: #1d1d1f; /** use as background color for screens that are not in a specific 'app' */
  --eds-color-surface-paper-secondary: #464440; /** use as container color when layered above surface-paper-primary */
  --eds-color-surface-overlay: #1d1d1f; /** Use this only for overlay layers. To be used on a frame behind a modal together with the Opacity/Overlay token */
  --eds-color-icon-accent-yellow-on-bold: #704b00; /** use as icon color for bold orange tags, thumbnails, banners, message cards (?) with no meaning; paired with orange-on-bold text color, orange-on-bold border color, and/or orange-bold bg color */
  --eds-color-icon-accent-yellow-on-subtle: #ffeaad; /** use as icon color for subtle orange tags, thumbnails, banners, message cards (?) with no meaning; paired with orange-on-subtle text color, orange-on-subtle border color, and/or orange-subtle bg color */
  --eds-color-icon-accent-lime-on-bold: #224200; /** use as icon color for bold lime tags, thumbnails, banners, message cards (?) with no meaning; paired with lime-on-bold text color, lime-on-bold border color, and/or lime-bold bg color */
  --eds-color-icon-accent-lime-on-subtle: #cdf6b1; /** use as icon color for subtle lime tags, thumbnails, banners, message cards (?) with no meaning; paired with lime-on-subtle text color, lime-on-subtle border color, and/or lime-subtle bg color */
  --eds-color-icon-accent-teal-on-bold: #003b3a; /** use as icon color for bold teal tags, thumbnails, banners, message cards (?) with no meaning; paired with teal-on-bold text color, teal-on-bold border color, and/or teal-bold bg color */
  --eds-color-icon-accent-teal-on-subtle: #b1f6f2; /** use as icon color for subtle teal tags, thumbnails, banners, message cards (?) with no meaning; paired with teal-on-subtle text color, teal-on-subtle border color, and/or teal-subtle bg color */
  --eds-color-icon-accent-blue-on-bold: #01384d; /** use as icon color for bold blue tags, thumbnails, banners, message cards (?) with no meaning; paired with teal-on-bold text color, teal-on-bold border color, and/or teal-bold bg color */
  --eds-color-icon-accent-blue-on-subtle: #d6f1ff; /** use as icon color for subtle blue tags, thumbnails, banners, message cards (?) with no meaning; paired with blue-on-subtle text color, blue-on-subtle border color, and/or blue-subtle bg color */
  --eds-color-icon-accent-purple-on-bold: #441a6d; /** use as icon color for bold purple tags, thumbnails, banners, message cards (?) with no meaning; paired with purple-on-bold text color, purple-on-bold border color, and/or purple-bold bg color */
  --eds-color-icon-accent-purple-on-subtle: #eedeff; /** use as icon color for subtle purple tags, thumbnails, banners, message cards (?) with no meaning; paired with purple-on-subtle text color, purple-on-subtle border color, and/or purple-subtle bg color */
  --eds-color-icon-accent-pink-on-bold: #750035; /** use as icon color for bold pink tags, thumbnails, banners, message cards (?) with no meaning; paired with pink-on-bold text color, pink-on-bold border color, and/or pink-bold bg color */
  --eds-color-icon-accent-pink-on-subtle: #ffd1e4; /** use as icon color for subtle pink tags, thumbnails, banners, message cards (?) with no meaning; paired with pink-on-subtle text color, pink-on-subtle border color, and/or pink-subtle bg color */
  --eds-color-icon-default: #faf6f0; /** Use as default icon color given that the icon is on a lighter surface or background that’s not colored */
  --eds-color-icon-default-on-bold: #ffffff; /** Use as icon color given that icon is on a brand background. ie. icons in a brand button. May use when icon is on a bold background if, the icon needs to stay the same color in light and dark mode */
  --eds-color-icon-inverse: #1d1d1f; /** Use as icon color given that icon is on a darker surface or background, ie. icons in a brand, primary, or destructive button. May use when icon is on a bold background if, for some reason, the color-icon-on-bold doesn't fit */
  --eds-color-icon-brand-on-bold: #241f7a; /** use as icon color for bold indigo tags, message cards (?), and banners that have ‘brand’ meaning; paired with brand-on-bold text color, brand-on-bold border color, and brand-bold bg color */
  --eds-color-icon-brand-on-subtle: #dcdcfe; /** use as icon color for subtle indigo tags, message cards (?), and banners that have ‘brand’ meaning; paired with brand-on-bold text color, brand-on-bold border color, and brand-bold bg color */
  --eds-color-icon-info-on-subtle: #cfdffb; /** use as icon color for subtle indigo tags, message cards (?), and banners that have ‘brand’ meaning; paired with brand-on-bold text color, brand-on-bold border color, and brand-bold bg color */
  --eds-color-icon-success-on-subtle: #9df0b3; /** use as icon color for subtle success tags and banners that have ‘success’ meaning; paired with success-on-subtle text color, success-on-subtle border color, and success-subtle bg color */
  --eds-color-icon-warning-on-bold: #753700; /** use as icon color for bold warning tags and banners that have ‘warning’ meaning; paired with warning-on-bold text color, warning-on-bold border color, and warning-bold bg color */
  --eds-color-icon-warning-on-subtle: #ffdaa3; /** use as icon color for subtle warning tags and banners that have ‘warning’ meaning; paired with warning-on-subtle text color, warning-on-subtle border color, and warning-subtle bg color */
  --eds-color-icon-error-on-subtle: #fbc4bb; /** use as icon color for subtle attention/error tags and banners that have ‘error’ meaning; paired with error-on-subtle text color, error-on-subtle border color, and error-subtle bg color */
  --eds-color-icon-input-error: #f14638; /** Use as icon color for select, text field, and text area error states; paired with text-input-error color, border-input-error color */
  --eds-color-background-reserved-brand-default: #5a58ff; /** use as default bg color in brand button, selected checkbox, selected radio button, selected switch */
  --eds-color-background-reserved-brand-hover: #4c42e4; /** use as the hover color in brand button, selected checkbox, selected radio button */
  --eds-color-background-reserved-brand-pressed: #3d33cc; /** used as the pressed color in brand button */
  --eds-color-background-reserved-primary-inverse: #ffffff; /** used as the default color in primary button */
  --eds-color-background-reserved-primary-inverse-hover: #e1e1e3; /** used as the hover color in primary button */
  --eds-color-background-reserved-primary-inverse-pressed: #cacacc; /** used as the pressed color in primary button */
  --eds-color-background-reserved-error-bold-default: #e0241a; /** use as default bg color in destructive button */
  --eds-color-background-reserved-error-bold-hover: #b20203; /** use as hover color in destructive button */
  --eds-color-background-reserved-error-bold-pressed: #8b0102; /** use as pressed color in destructive button */
  --eds-color-background-reserved-warning-bold-default: #ff9429; /** use as warning color in progress bar or other UI elements that convey "at risk" progress */
  --eds-color-background-reserved-success-bold-default: #009951; /** use as bg color for success stepper and progress bar */
  --eds-color-background-reserved-skeleton-gradient: rgba(29, 29, 31, 0); /** Used for the skeleton component's linear gradient start and end colors. Using background secondary with 0% opacity as follows: Light: Neutral/25 at 0% opacity Dark: Neutral/950 at 0% opacity */
  --eds-color-background-accent-neutral-bold-default: #141415; /** use as default bg color for tooltip, toast */
  --eds-color-background-accent-yellow-bold-default: #ffd970; /** use as default bg color for bold orange tags, message cards, banners, thumbnails, and other relevant orange colored components with no meaning; paired with orange-on-bold text color, orange-on-bold border color, and orange-on-bold icon color */
  --eds-color-background-accent-yellow-bold-hover: #ffce47; /** use as hover color for bold orange tags, thumbnails, and other relevant orange colored components with no meaning; paired with orange-on-bold text color, orange-on-bold border color, and orange-on-bold icon color */
  --eds-color-background-accent-yellow-bold-pressed: #ffbf0f; /** use as pressed color for bold orange tags, thumbnails, and other relevant orange colored components with no meaning; paired with orange-on-bold text color, orange-on-bold border color, and orange-on-bold icon color */
  --eds-color-background-accent-yellow-subtle-default: #704b00; /** use as default bg color for subtle orange tags, message cards, banners, thumbnails, and other relevant orange colored components with no meaning; paired with orange-on-subtle text color, orange-on-subtle border color, and orange-on-subtle icon color */
  --eds-color-background-accent-yellow-subtle-hover: #855800; /** use as hover bg color for subtle orange tags, thumbnails, and other relevant orange colored components with no meaning; paired with orange-on-subtle text color, orange-on-subtle border color, and orange-on-subtle icon color */
  --eds-color-background-accent-yellow-subtle-pressed: #8a6000; /** use as pressed bg color for subtle orange tags, thumbnails, and other relevant orange colored components with no meaning; paired with orange-on-subtle text color, orange-on-subtle border color, and orange-on-subtle icon color */
  --eds-color-background-accent-lime-bold-default: #b5ed91; /** use as default bg color for bold lime tags, message cards, banners, thumbnails, and other relevant lime colored components with no meaning; paired with lime-on-bold text color, lime-on-bold border color, and lime-on-bold icon color */
  --eds-color-background-accent-lime-bold-hover: #97df5d; /** use as hover color for bold lime tags, thumbnails, and other relevant lime colored components with no meaning; paired with lime-on-bold text color, lime-on-bold border color, and lime-on-bold icon color */
  --eds-color-background-accent-lime-bold-pressed: #7fc544; /** use as pressed color for lime orange tags, thumbnails, and other relevant lime colored components with no meaning; paired with lime-on-bold text color, lime-on-bold border color, and lime-on-bold icon color */
  --eds-color-background-accent-lime-subtle-default: #224200; /** use as default bg color for subtle lime tags, message cards, banners, thumbnails, and other relevant lime colored components with no meaning; paired with lime-on-subtle text color, lime-on-subtle border color, and lime-on-subtle icon color */
  --eds-color-background-accent-lime-subtle-hover: #2f5701; /** use as hover bg color for subtle lime tags, thumbnails, and other relevant lime colored components with no meaning; paired with lime-on-subtle text color, lime-on-subtle border color, and lime-on-subtle icon color */
  --eds-color-background-accent-lime-subtle-pressed: #3a6900; /** use as pressed bg color for subtle lime tags, thumbnails, and other relevant lime colored components with no meaning; paired with lime-on-subtle text color, lime-on-subtle border color, and lime-on-subtle icon color */
  --eds-color-background-accent-teal-bold-default: #8dece8; /** use as default bg color for bold teal tags, message cards, banners, thumbnails, and other relevant teal colored components with no meaning; paired with teal-on-bold text color, teal-on-bold border color, and teal-on-bold icon color */
  --eds-color-background-accent-teal-bold-hover: #4ed6d0; /** use as hover color for bold teal tags, thumbnails, and other relevant teal colored components with no meaning; paired with teal-on-bold text color, teal-on-bold border color, and teal-on-bold icon color */
  --eds-color-background-accent-teal-bold-pressed: #2dbeb9; /** use as pressed color for bold teal tags, thumbnails, and other relevant teal colored components with no meaning; paired with teal-on-bold text color, teal-on-bold border color, and teal-on-bold icon color */
  --eds-color-background-accent-teal-subtle-default: #003b3a; /** use as default bg color for subtle teal tags, message cards, banners, thumbnails, and other relevant teal colored components with no meaning; paired with teal-on-subtle text color, teal-on-subtle border color, and teal-on-subtle icon color */
  --eds-color-background-accent-teal-subtle-hover: #02504e; /** use as hover bg color for subtle teal tags, thumbnails, and other relevant teal colored components with no meaning; paired with teal-on-subtle text color, teal-on-subtle border color, and teal-on-subtle icon color */
  --eds-color-background-accent-teal-subtle-pressed: #026663; /** use as pressed bg color for subtle teal tags, thumbnails, and other relevant teal colored components with no meaning; paired with teal-on-subtle text color, teal-on-subtle border color, and teal-on-subtle icon color */
  --eds-color-background-accent-blue-bold-default: #b4e6f6; /** use as default bg color for bold blue tags, message cards, banners, thumbnails, and other relevant blue colored components with no meaning; paired with blue-on-bold text color, blue-on-bold border color, and blue-on-bold icon color */
  --eds-color-background-accent-blue-bold-hover: #87d4ee; /** use as hover color for bold blue tags, thumbnails, and other relevant blue colored components with no meaning; paired with blue-on-bold text color, blue-on-bold border color, and blue-on-bold icon color */
  --eds-color-background-accent-blue-bold-pressed: #5bc3e5; /** use as pressed color for bold blue tags, thumbnails, and other relevant blue colored components with no meaning; paired with blue-on-bold text color, blue-on-bold border color, and blue-on-bold icon color */
  --eds-color-background-accent-blue-subtle-default: #01384d; /** use as default bg color for subtle blue tags, message cards, banners, thumbnails, and other relevant blue colored components with no meaning; paired with blue-on-subtle text color, blue-on-subtle border color, and blue-on-subtle icon color */
  --eds-color-background-accent-blue-subtle-hover: #004c67; /** use as hover bg color for subtle blue tags, thumbnails, and other relevant blue colored components with no meaning; paired with blue-on-subtle text color, blue-on-subtle border color, and blue-on-subtle icon color */
  --eds-color-background-accent-blue-subtle-pressed: #006182; /** use as pressed bg color for subtle blue tags, thumbnails, and other relevant blue colored components with no meaning; paired with blue-on-subtle text color, blue-on-subtle border color, and blue-on-subtle icon color */
  --eds-color-background-accent-purple-bold-default: #e6cdff; /** use as default bg color for bold purple tags, message cards, banners, thumbnails, and other relevant purple colored components with no meaning; paired with purple-on-bold text color, purple-on-bold border color, and purple-on-bold icon color */
  --eds-color-background-accent-purple-bold-hover: #d9b6fb; /** use as hover color for bold purple tags, thumbnails, and other relevant purple colored components with no meaning; paired with purple-on-bold text color, purple-on-bold border color, and purple-on-bold icon color */
  --eds-color-background-accent-purple-bold-pressed: #cd9bff; /** use as pressed color for bold purple tags, thumbnails, and other relevant purple colored components with no meaning; paired with purple-on-bold text color, purple-on-bold border color, and purple-on-bold icon color */
  --eds-color-background-accent-purple-subtle-default: #441a6d; /** use as default bg color for subtle purple tags, message cards, banners, thumbnails, and other relevant purple colored components with no meaning; paired with purple-on-subtle text color, purple-on-subtle border color, and purple-on-subtle icon color */
  --eds-color-background-accent-purple-subtle-hover: #532382; /** use as hover color for subtle purple tags, thumbnails, and other relevant purple colored components with no meaning; paired with purple-on-subtle text color, purple-on-subtle border color, and purple-on-subtle icon color */
  --eds-color-background-accent-purple-subtle-pressed: #7135ac; /** use as pressed color for subtle purple tags, thumbnails, and other relevant purple colored components with no meaning; paired with purple-on-subtle text color, purple-on-subtle border color, and purple-on-subtle icon color */
  --eds-color-background-accent-pink-bold-default: #fdbed8; /** use as default bg color for bold pink tags, message cards, banners, thumbnails, and other relevant pink colored components with no meaning; paired with pink-on-bold text color, pink-on-bold border color, and pink-on-bold icon color */
  --eds-color-background-accent-pink-bold-hover: #fb9bc1; /** use as hover color for bold pink tags, thumbnails, and other relevant pink colored components with no meaning; paired with pink-on-bold text color, pink-on-bold border color, and pink-on-bold icon color */
  --eds-color-background-accent-pink-bold-pressed: #ff7bb0; /** use as pressed color for bold pink tags, thumbnails, and other relevant pink colored components with no meaning; paired with pink-on-bold text color, pink-on-bold border color, and pink-on-bold icon color */
  --eds-color-background-accent-pink-subtle-default: #5c0029; /** use as default bg color for subtle pink tags, message cards, banners, thumbnails, and other relevant pink colored components with no meaning; paired with pink-on-subtle text color, pink-on-subtle border color, and pink-on-subtle icon color */
  --eds-color-background-accent-pink-subtle-hover: #750035; /** use as hover color for subtle pink tags, thumbnails, and other relevant pink colored components with no meaning; paired with pink-on-subtle text color, pink-on-subtle border color, and pink-on-subtle icon color */
  --eds-color-background-accent-pink-subtle-pressed: #950043; /** use as pressed color for subtle pink tags, thumbnails, and other relevant pink colored components with no meaning; paired with pink-on-subtle text color, pink-on-subtle border color, and pink-on-subtle icon color */
  --eds-color-background-primary: #141415; /** use as a background color in components w/ small surface areas -  secondary buttons, text fields, text areas, selects, dropdown menus */
  --eds-color-background-primary-hover: #262627; /** use as hover state color for component that's not a card */
  --eds-color-background-primary-pressed: #323234; /** use as active state color for component that's not a card */
  --eds-color-background-secondary: #1d1d1f; /** no use case right now but here if you need it */
  --eds-color-background-tertiary: #262627; /** use as background color for header table base cell, skeleton, default tag, segmented control (Not indiv item) */
  --eds-color-background-secondary-or-tertiary-hover: #323234; /** use as hover color for header table base cell, default tag, segmented control item */
  --eds-color-background-quaternary: #323234; /** use as background color for progress bar */
  --eds-color-background-brand-bold-default: #d1d0fb; /** use as default bg color for bold indigo tags, message cards (?), banners and other relevant indigo colored components that have ‘brand’ meaning; paired with brand-on-bold text color, brand-on-bold border color, and brand-on-bold icon color */
  --eds-color-background-brand-bold-hover: #b7b6fb; /** use as hover color for bold indigo tags and other relevant indigo colored components that have ‘brand’ meaning; paired with brand-on-bold text color, brand-on-bold border color, and brand-on-bold icon color */
  --eds-color-background-brand-bold-pressed: #918fff; /** use as pressed color for bold indigo tags and other relevant indigo colored components that have ‘brand’ meaning; paired with brand-on-bold text color, brand-on-bold border color, and brand-on-bold icon color */
  --eds-color-background-brand-subtle-default: #241f7a; /** use as default bg color for subtle indigo tags, message cards (?), banners and other relevant indigo colored components that have ‘brand’ meaning; paired with brand-on-subtle text color, brand-on-subtle border color, and brand-on-subtle icon color */
  --eds-color-background-brand-subtle-hover: #3029a3; /** use as hover color for subtle indigo tags and other relevant indigo colored components that have ‘brand’ meaning; paired with brand-on-subtle text color, brand-on-subtle border color, and brand-on-subtle icon color */
  --eds-color-background-brand-subtle-pressed: #3d33cc; /** use as pressed color for subtle indigo tags and other relevant indigo colored components that have ‘brand’ meaning; paired with brand-on-subtle text color, brand-on-subtle border color, and brand-on-subtle icon color */
  --eds-color-background-info-subtle-default: #041e47; /** use as default bg color for subtle success tags, banners, and other relevant green colored components that have ‘success’ meaning; paired with success-on-subtle text color, success-on-subtle border color, and success-on-subtle icon color */
  --eds-color-background-info-subtle-hover: #06285e; /** use as hover color for subtle success tags and other relevant green colored components that have ‘success’ meaning; paired with success-on-subtle text color, success-on-subtle border color, and success-on-subtle icon color */
  --eds-color-background-info-subtle-pressed: #083b8e; /** use as pressed color for subtle success tags and other relevant green colored components that have ‘success’ meaning; paired with success-on-subtle text color, success-on-subtle border color, and success-on-subtle icon color */
  --eds-color-background-success-subtle-default: #013e1d; /** use as default bg color for subtle success tags, banners, and other relevant green colored components that have ‘success’ meaning; paired with success-on-subtle text color, success-on-subtle border color, and success-on-subtle icon color */
  --eds-color-background-success-subtle-hover: #01542a; /** use as hover color for subtle success tags and other relevant green colored components that have ‘success’ meaning; paired with success-on-subtle text color, success-on-subtle border color, and success-on-subtle icon color */
  --eds-color-background-success-subtle-pressed: #016a36; /** use as pressed color for subtle success tags and other relevant green colored components that have ‘success’ meaning; paired with success-on-subtle text color, success-on-subtle border color, and success-on-subtle icon color */
  --eds-color-background-warning-subtle-default: #753700; /** use as default bg color for subtle warning tags, banners, and other relevant yellow colored components that have ‘warning’ meaning; paired with warning-on-subtle text color, warning-on-subtle border color, and warning-on-subtle icon color */
  --eds-color-background-warning-subtle-hover: #944500; /** use as hover color for subtle warning tags and other relevant yellow colored components that have ‘warning’ meaning; paired with warning-on-subtle text color, warning-on-subtle border color, and warning-on-subtle icon color */
  --eds-color-background-warning-subtle-pressed: #ad4b00; /** use as pressed color for subtle warning tags and other relevant yellow colored components that have ‘warning’ meaning; paired with warning-on-subtle text color, warning-on-subtle border color, and warning-on-subtle icon color */
  --eds-color-background-error-subtle-default: #470000; /** use as default bg color for subtle attention/error tags, banners, and other relevant red colored components that have ‘error’ meaning; paired with error-on-subtle text color, error-on-subtle border color, and error-on-subtle icon color */
  --eds-color-background-error-subtle-hover: #6a0101; /** use as hover color for subtle attention/error tags and other relevant red colored components that have ‘error’ meaning; paired with error-on-subtle text color, error-on-subtle border color, and error-on-subtle icon color */
  --eds-color-background-error-subtle-pressed: #8b0102; /** use as pressed color for subtle attention/error tags and other relevant red colored components that have ‘error’ meaning; paired with error-on-subtle text color, error-on-subtle border color, and error-on-subtle icon color */
  --eds-color-border-dark: #e0dcd7; /** use as border color of secondary button */
  --eds-color-border-primary: #a2a2a4; /** use as border color for default states of text fields, text areas, selects, and unselected switch triggers, checkboxes, radios */
  --eds-color-border-primary-hover: #b1b1b3; /** use as border color for default states of text fields, text areas, selects, and unselected switch triggers, checkboxes, radios */
  --eds-color-border-secondary: #49494b; /** use as border color for floaty elements that go on a page like sheets, cards, popovers, modals, dropdown menus; use as divider color */
  --eds-color-border-tertiary: #6d6d6f; /** use as border color for media elements that go on a page like sheets, cards, popovers, modals */
  --eds-color-border-selected: #918fff; /** use as a border color @ 2px for the active state of components such as selects, text fields, text areas, segmented control indiv item, quick filter, etc. */
  --eds-color-border-focus: #918fff; /** use as a border color @ 2px (w/ 2px white space between focus border and the component) for the focus state of interactable components such as buttons, selects, text fields, text areas, segmented control indiv items, quick filters, radio buttons, checkboxes, switches, menu list items, list items, selectable cards */
  --eds-color-border-brand-on-bold: #918fff; /** use as border color for bold indigo tags that have ‘brand’ meaning; paired with brand-on-bold icon color, brand-on-bold text color, and brand-bold bg color */
  --eds-color-border-brand-on-bold-inverse: #d1d0fb; /** use as border color for the track of a spinner; paired with selected border color. This color retains the same base token in light and dark mode */
  --eds-color-border-brand-on-subtle: #4c42e4; /** use as border color for subtle indigo tags that have ‘brand’ meaning; paired with brand-on-subtle icon color, brand-on-subtle text color, and brand-subtle bg color */
  --eds-color-border-info-on-subtle: #0053a0; /** use as border color for subtle success tags that have ‘success’ meaning; paired with success-on-subtle icon color, success-on-subtle text color, and success-subtle bg color */
  --eds-color-border-success-on-subtle: #018143; /** use as border color for subtle success tags that have ‘success’ meaning; paired with success-on-subtle icon color, success-on-subtle text color, and success-subtle bg color */
  --eds-color-border-warning-on-bold: #ffa947; /** use as border color for bold warning tags that have ‘warning’ meaning; paired with warning-on-bold icon color, warning-on-bold text color, and warning-bold bg color */
  --eds-color-border-warning-on-subtle: #d15e00; /** use as border color for subtle warning tags that have ‘warning’ meaning; paired with warning-on-subtle icon color, warning-on-subtle text color, and warning-subtle bg color */
  --eds-color-border-input-error: #f14638; /** Use as border color for select, text field, and text area error states; paired with text-input-error color, border-input-error color */
  --eds-color-border-error-on-subtle: #b20203; /** use as border color for subtle attention/error tags that have ‘error’ meaning; paired with error-on-subtle icon color, error-on-subtle text color, and error-subtle bg color */
  --eds-color-border-accent-neutral-on-bold: #49494b; /** use as border color for toasts and tooltips; paired with text color, orange-on-bold icon color, and orange-bold bg color */
  --eds-color-border-accent-yellow-on-bold: #ffbf0f; /** use as border color for bold orange tags and thumbnails with no meaning; paired with orange-on-bold text color, orange-on-bold icon color, and orange-bold bg color */
  --eds-color-border-accent-yellow-on-subtle: #b87d00; /** use as border color for subtle orange tags and thumbnails with no meaning; paired with orange-on-subtle text color, orange-on-subtle icon color, and orange-subtle bg color */
  --eds-color-border-accent-lime-on-bold: #7fc544; /** use as border color for bold lime tags and thumbnails with no meaning; paired with lime-on-bold text color, lime-on-bold icon color, and lime-bold bg color */
  --eds-color-border-accent-lime-on-subtle: #488000; /** use as border color for subtle lime tags and thumbnails with no meaning; paired with lime-on-subtle text color, lime-on-subtle icon color, and lime-subtle bg color */
  --eds-color-border-accent-teal-on-bold: #2dbeb9; /** use as border color for bold teal tags and thumbnails with no meaning; paired with teal-on-bold text color, teal-on-bold icon color, and teal-bold bg color */
  --eds-color-border-accent-teal-on-subtle: #027c79; /** use as border color for subtle teal tags and thumbnails with no meaning; paired with teal-on-subtle text color, teal-on-subtle icon color, and teal-subtle bg color */
  --eds-color-border-accent-blue-on-bold: #5bc3e5; /** use as border color for bold blue tags and thumbnails with no meaning; paired with blue-on-bold text color, blue-on-bold icon color, and blue-bold bg color */
  --eds-color-border-accent-blue-on-subtle: #0076a8; /** use as border color for subtle blue tags and thumbnails with no meaning; paired with blue-on-subtle text color, blue-on-subtle icon color, and blue-subtle bg color */
  --eds-color-border-accent-purple-on-bold: #cd9bff; /** use as border color for bold purple tags and thumbnails with no meaning; paired with purple-on-bold text color, purple-on-bold icon color, and purple-bold bg color */
  --eds-color-border-accent-purple-on-subtle: #8e46d5; /** use as border color for subtle purple tags and thumbnails with no meaning; paired with purple-on-subtle text color, purple-on-subtle icon color, and/or purple-subtle bg color */
  --eds-color-border-accent-pink-on-bold: #ff7bb0; /** use as border color for bold pink tags and thumbnails with no meaning; paired with pink-on-bold text color, pink-on-bold icon color, and pink-bold bg color */
  --eds-color-border-accent-pink-on-subtle: #c20651; /** use as border color for subtle pink tags and thumbnails with no meaning; paired with pink-on-subtle text color, pink-on-subtle icon color, and/or pink-subtle bg color */
  --eds-color-shadow-sm: rgba(23, 23, 25, 0.63); /** used in light and dark modes for shadow-xs, s, m, l color */
  --eds-color-shadow-md: rgba(23, 23, 25, 0.66); /** used in light and dark modes for shadow-xl color */
  --eds-color-shadow-lg: rgba(23, 23, 25, 0.68); /** used in light and dark modes for shadow-2xl color */
  --eds-spacing-4xs: 2px;
  --eds-spacing-3xs: 4px;
  --eds-spacing-2xs: 6px;
  --eds-spacing-xs: 8px;
  --eds-spacing-sm: 10px;
  --eds-spacing-md: 12px;
  --eds-spacing-lg: 14px;
  --eds-spacing-xl: 16px;
  --eds-spacing-2xl: 20px;
  --eds-spacing-3xl: 24px;
  --eds-spacing-4xl: 32px;
  --eds-spacing-5xl: 36px;
  --eds-spacing-6xl: 40px;
  --eds-spacing-7xl: 48px;
  --eds-spacing-8xl: 56px;
  --eds-spacing-9xl: 64px;
  --eds-spacing-10xl: 80px;
  --eds-size-2xs: 20px;
  --eds-size-xs: 24px;
  --eds-size-sm: 32px;
  --eds-size-md: 36px;
  --eds-size-lg: 44px;
  --eds-size-xl: 52px;
  --eds-radius-2xs: 4px;
  --eds-radius-xs: 8px;
  --eds-radius-sm: 12px;
  --eds-radius-md: 16px;
  --eds-radius-lg: 18px;
  --eds-radius-xl: 20px;
  --eds-radius-2xl: 24px;
  --eds-radius-pill: 112px;
  --eds-opacity-disabled: 44px; /** Use for disabled state */
  --eds-opacity-placeholder: 52px;
  --eds-opacity-overlay: 44px; /** Layer opacity for overlays. To be used on a frame behind a modal together with the Surface/overlay color token */
  --eds-display-xl: 700 58px/110.34% Figtree;
  --eds-display-lg: 700 46px/113% Figtree;
  --eds-display-md: 700 42px/119% Figtree;
  --eds-display-sm: 700 36px/122.2% Figtree;
  --eds-headline-xl: 700 32px/125% Figtree;
  --eds-headline-lg: 700 28px/128.6% Figtree;
  --eds-headline-md: 700 26px/130.8% Figtree;
  --eds-headline-sm: 700 22px/136.4% Figtree;
  --eds-title-xl-strong: 700 20px/140% Figtree; /** Use sparingly for emphasising title text */
  --eds-title-xl: 600 20px/140% Figtree; /** For titles in components */
  --eds-title-lg-strong: 700 18px/144% Figtree; /** Use sparingly for emphasising title text */
  --eds-title-lg: 600 18px/144% Figtree; /** For titles in small components where space is limited. */
  --eds-title-default-strong: 700 16px/150% Figtree; /** Use sparingly for emphasising title text */
  /**
   * Default font for titles. 
   * Example: For all text that may appear beside iconography, such as in a button
   */
  --eds-title-default: 600 16px/150% Figtree;
  --eds-title-sm-strong: 700 14px/143% Figtree; /** Use sparingly for emphasising text in fine print or tight spaces. */
  /**
   * Use sparingly for emphasising text in fine print or tight spaces.
   * Example: used for thumbnail initial or xs labels
   */
  --eds-title-sm: 600 14px/143% Figtree;
  --eds-body-lg: 400 18px/144% Figtree; /** Used to contrast with the default body text for greater emphasis or semantic messaging. */
  /**
   * Default font for body text styles. 
   * Use in paragraphs, long-form text.
   */
  --eds-body-default: 400 16px/150% Figtree;
  --eds-body-sm: 400 14px/143% Figtree; /** Use in secondary level content such as fine print or semantic messaging. Use sparingly. */
  --eds-shadow-xs: 0px 1px 6px 0px rgba(23, 23, 25, 0.63), 0px 1px 6px 0px rgba(23, 23, 25, 0.63);
  --eds-shadow-sm: 0px 2px 14px 0px rgba(23, 23, 25, 0.63), 0px 2px 14px 0px rgba(23, 23, 25, 0.63);
  --eds-shadow-md: 0px 4px 24px 0px rgba(23, 23, 25, 0.66), 0px 4px 24px 0px rgba(23, 23, 25, 0.66);
  --eds-shadow-lg: 0px 8px 48px 0px rgba(23, 23, 25, 0.68), 0px 8px 48px 0px rgba(23, 23, 25, 0.68);
  --eds-shadow-xl: 0px 0px 24px 0px rgba(23, 23, 25, 0.68), 0px 14px 48px 0px rgba(23, 23, 25, 0.68);
  --eds-shadow-2xl: 0px 0px 24px 0px rgba(23, 23, 25, 0.68), 0px 32px 96px 0px rgba(23, 23, 25, 0.68);
}