/**
* @file
* Semantic Mode Color Variables
*
* This file defines color variables in our design system based on the semantic design tokens from our Figma designs.
* These provide context about where and how content should receive a certain color, given the current mode (light or dark).
* 
* The mode is set based on an element's `data-mode` attribute value, not based on a user's system preferences.
* In most cases, light mode is when an element has a light background and dark text, while dark mode is when an element has a dark background and light text.
* 
* The background, text, and border colors are set using the `light-dark` color function. Most of the gradients and scrims remain the same in both modes.
* This function returns the first color if the mode is light and the second color if the mode is dark.
* 
* These tokens can be used in a component's stylesheet or mixins to apply the appropriate color based on the scenario.
* If there are any discrepancies between the Figma design tokens and the tokens defined in this file, reach out to the Figma design team to update the tokens.
*/
:root {
  color-scheme: light dark;
  --text-primary: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --text-secondary: light-dark(var(--neutral-color-800), var(--neutral-color-200));
  --text-tertiary: light-dark(var(--neutral-color-700), var(--neutral-color-600));
  --text-action: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --text-action-hover: light-dark(var(--neutral-color-800), var(--neutral-color-400));
  --text-on-action: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --text-on-action-inv: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --text-on-hover: light-dark(var(--neutral-color-600), var(--neutral-color-800));
  --text-on-hover-inv: light-dark(var(--neutral-color-200), var(--neutral-color-400));
  --text-on-focus: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --text-on-focus-inv: light-dark(var(--neutral-color-850), var(--neutral-color-150));
  --text-on-disabled: light-dark(var(--neutral-color-800), var(--neutral-color-300));
  --text-success: light-dark(var(--success-color-500), var(--success-color-200));
  --text-on-success: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --text-information: light-dark(var(--information-color-500), var(--information-color-200));
  --text-on-information: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --text-warning: light-dark(var(--warning-color-500), var(--warning-color-100));
  --text-on-warning: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --text-error: light-dark(var(--error-color-500), var(--error-color-200));
  --text-on-error: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --text-disabled: light-dark(var(--neutral-color-800), var(--neutral-color-500));
  --border-primary: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --border-action: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --border-action-hover: light-dark(var(--neutral-color-800), var(--neutral-color-200));
  --border-action-hover-inv: light-dark(var(--neutral-color-400), var(--neutral-color-400));
  --border-on-action: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --border-success: light-dark(var(--success-color-500), var(--success-color-300));
  --border-information: light-dark(var(--information-color-500), var(--information-color-300));
  --border-warning: light-dark(var(--warning-color-500), var(--warning-color-300));
  --border-error: light-dark(var(--error-color-500), var(--error-color-300));
  --border-disabled: light-dark(var(--neutral-color-800), var(--neutral-color-700));
  --border-on-disabled: light-dark(var(--neutral-color-600), var(--neutral-color-400));
  --border-focus: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --border-on-focus: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --border-action-hover-card: light-dark(var(--primary-color-500), var(--primary-color-150));
  --border-action-pressed-card: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --icon-primary: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --icon-secondary: light-dark(var(--neutral-color-800), var(--neutral-color-100));
  --icon-tertiary: light-dark(var(--neutral-color-700), var(--neutral-color-100));
  --icon-success: light-dark(var(--success-color-600), var(--success-color-400));
  --icon-information: light-dark(var(--information-color-600), var(--information-color-400));
  --icon-error: light-dark(var(--error-color-600), var(--error-color-150));
  --icon-warning: light-dark(var(--warning-color-600), var(--warning-color-400));
  --icon-action: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --icon-hover: light-dark(var(--neutral-color-800), var(--neutral-color-400));
  --icon-focus: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --icon-disabled: light-dark(var(--neutral-color-800), var(--neutral-color-200));
  --icon-on-action: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --icon-on-action-inv: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --icon-on-focus: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --icon-on-focus-inv: light-dark(var(--neutral-color-850), var(--neutral-color-150));
  --icon-on-hover: light-dark(var(--neutral-color-600), var(--neutral-color-800));
  --icon-on-hover-inv: light-dark(var(--neutral-color-200), var(--neutral-color-200));
  --icon-on-disabled: light-dark(var(--neutral-color-800), var(--neutral-color-500));
  --surface-primary: light-dark(var(--neutral-color-100), var(--neutral-color-900));
  --surface-secondary: light-dark(var(--neutral-color-150), var(--neutral-color-875));
  --surface-tertiary: light-dark(var(--neutral-color-500), var(--neutral-color-800));
  --surface-page: light-dark(var(--neutral-color-300), var(--neutral-color-700));
  --surface-success: light-dark(var(--success-color-600), var(--success-color-200));
  --surface-information: light-dark(var(--information-color-700), var(--information-color-200));
  --surface-error: light-dark(var(--error-color-700), var(--error-color-200));
  --surface-warning: light-dark(var(--warning-color-800), var(--warning-color-200));
  --surface-action: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --surface-action-hover: light-dark(var(--neutral-color-850), var(--neutral-color-200));
  --surface-action-hover-2: light-dark(var(--neutral-color-200), var(--neutral-color-800));
  --surface-focus: light-dark(var(--neutral-color-900), var(--neutral-color-100));
  --surface-disabled: light-dark(var(--neutral-color-800), var(--neutral-color-200));
  --surface-tag: light-dark(var(--primary-color-500), var(--primary-color-150));
  --gradients-gradient-1: var(--primary-color-500);
  --gradients-gradient-2: var(--secondary-color-400);
  --gradients-gradient-3: var(--tertiary-color-700);
  --gradients-gradient-4: var(--accent1-color-400);
  --gradients-gradient-5: var(--accent2-color-500);
  --gradients-gradient-6: var(--success-color-400);
  --gradients-gradient-7: var(--information-color-500);
  --gradients-gradient-8: var(--warning-color-600);
  --gradients-gradient-9: var(--error-color-500);
  --gradients-gradient-10: var(--accent2-color-400);
  --gradients-scrims-scrim-1: var(--primary-color-500);
  --gradients-scrims-scrim-2: var(--secondary-color-400);
  --gradients-scrims-scrim-3: var(--tertiary-color-700);
  --gradients-scrims-scrim-4: var(--information-color-600);
  --gradients-scrims-scrim-5: var(--warning-color-800);
  --gradients-scrims-scrim-6: var(--black);
  --gradients-scrims-scrim-7: light-dark(var(--lime-400), var(--black));
  --gradients-scrims-scrim-8: var(--error-color-500);
  --gradients-scrims-scrim-9: var(--purple-500);
  --gradients-scrims-scrim-10: var(--accent1-color-500);
}

[data-mode=light] {
  color-scheme: light;
}

[data-mode=dark] {
  color-scheme: dark;
}
/*# sourceMappingURL=../../../maps/base/variables-css/modes/mode.css.map */