/*
 *
 * Global tokens are the primitive color values for Threads.
 * These tokens should be only be reference in semantic and component-specific tokens.
 *
 */
:root {
  --black100: #fafafa;
  --black1000: #111111;
  --black200: #ededed;
  --black300: #ededed;
  --black400: #c5c5c5;
  --black500: #c5c5c5;
  --black600: #949494;
  --black700: #767676;
  --black800: #555555;
  --black900: #383838;
  --blue1000: #0061b3;
  --blue200: #d4f9ff;
  --blue400: #b1eefc;
  --blue600: #63daff;
  --blue700: #37b0f4;
  --blue800: #0a85ea;
  --blue900: #0072cf;
  --gold: #ba7d17;
  --green1000: #1e8262;
  --green200: #d0fce4;
  --green400: #abffdb;
  --green600: #5befbd;
  --green800: #23d09c;
  --green900: #1fa077;
  --purple1000: #4726a3;
  --purple200: #e1e1ff;
  --purple400: #c6befc;
  --purple600: #9986f7;
  --purple800: #7646ec;
  --purple900: #5c2ec7;
  --red1000: #b72743;
  --red200: #ffd7dc;
  --red400: #ffaab9;
  --red600: #ff7885;
  --red800: #f44e66;
  --red900: #d83d57;
  --white: #ffffff;
  --yellow1000: #dba81b;
  --yellow200: #fefbb8;
  --yellow400: #fbf1a0;
  --yellow600: #fce76b;
  --yellow800: #f2d211;
  --yellow900: #e6ba23;
}

/*
 *
 * Semantic tokens are based on context specific abstractions. These tokens make it easy
 * to handle global changes efficiently and allow for the creation of different
 * color modes and themes.
 *
 */
:root {
  --color-border-default-contrast: var(--black300);
  --color-border-divider: var(--black200);
  --color-border-high-contrast: var(--black1000);
  --color-border-low-contrast: var(--black200);
  --color-border-state-default: var(--black700);
  --color-border-state-disabled: var(--black400);
  --color-border-state-error: var(--red800);
  --color-border-state-filled: var(--black1000);
  --color-border-state-focused: var(--blue900);
  --color-border-status-attention: var(--blue900);
  --color-border-status-default: var(--black700);
  --color-border-status-error: var(--red900);
  --color-border-status-success: var(--green900);
  --color-border-status-warning: var(--gold);
  --color-border-state-hover: var(--blue900);
  --color-fill-bg-e1: var(--#ffffff);
  --color-fill-bg-inverse: var(--black1000);
  --color-fill-bg-primary: var(--white);
  --color-fill-bg-secondary: var(--black100);
  --color-fill-bg-tertiary: var(--black200);
  --color-fill-default: var(--black1000);
  --color-fill-inverse: var(--white);
  --color-fill-state-default: var(--black1000);
  --color-fill-state-disabled: var(--black300);
  --color-fill-state-error: var(--red800);
  --color-fill-state-hover: var(--blue900);
  --color-fill-state-pressed: var(--blue1000);
  --color-fill-status-attention: var(--blue400);
  --color-fill-status-default: var(--black400);
  --color-fill-status-error: var(--red400);
  --color-fill-status-success: var(--green400);
  --color-fill-status-warning: var(--yellow400);
  --color-text-default-contrast: var(--black900);
  --color-text-high-contrast: var(--black1000);
  --color-text-inverse-default-contrast: var(--black300);
  --color-text-inverse-high-contrast: var(--white);
  --color-text-inverse-low-contrast: var(--black500);
  --color-text-low-contrast: var(--black800);
  --color-text-state-default: var(--black1000);
  --color-text-state-disabled: var(--black700);
  --color-text-state-hover: var(--blue900);
  --color-text-state-pressed: var(--blue900);
}

/*
 *
 * Component-specific tokens represent values associated with a component.
 * These tokens make it easier for engineers applying tokens when building components.
 *
 */
:root {
  --badge-solid-text-color: var(--color-text-high-contrast);
  --badge-text-color: var(--color-text-high-contrast);
  --button-hover: var(--color-fill-state-hover);
  --button-pressed: var(--color-fill-state-pressed);
  --button-primary-fill-default: var(--black1000);
  --button-primary-fill-disabled: var(--black700);
  --button-secondary-border-default: var(--black1000);
  --button-secondary-border-disabled: var(--black700);
  --caret-light: var(--black500);
  --codeblock-container-bg: var(--color-fill-bg-inverse);
  --codeblock-text: var(--color-text-inverse-default-contrast);
  --codeblock-border-header: var(--black900);
  --codeblock-border-state-scroll: var(--black800);
  --codeblock-scrollbar-thumb: var(--black800);
  --codeblock-scrollbar-track: var(--color-fill-state-default);
  --codeblock-text-default: var(--color-text-inverse-low-contrast);
  --input-bg: var(--color-fill-bg-primary);
  --input-bg-disabled: var(--color-fill-state-disabled);
  --input-bg-filled: var(--black700);
  --input-border: var(--color-border-state-default);
  --input-border-disabled: var(--color-border-state-disabled);
  --input-border-error: var(--color-border-state-error);
  --input-border-focused: var(--color-border-state-focused);
  --input-border-hover: var(--color-border-state-hover);
  --input-border-pressed: var(--color-border-state-pressed);
  --input-dark-bg: var(--black1000);
  --input-dark-border: var(--black600);
  --input-dark-label: var(--black600);
  --input-dark-placeholder: var(--black600);
  --input-dark-text: var(--black400);
  --input-icon-button-bg-left: transparent;
  --input-icon-button-bg-right: var(--color-fill-inverse);
  --input-label-text-float-dark: var(--black600);
  --input-text-disabled: var(--color-text-state-disabled);
  --input-text-error: var(--red800);
  --loading-spinner: var(--blue800);
  --badge-text-color: var(--color-text-high-contrast);
  --badge-solid-text-color: var(--color-text-high-contrast);
  --phone-input-dark-text: var(--black600);
  --radio-bg-filled-hover: var(--black1000);
  --radio-bg-hover: var(--color-fill-bg-primary);
  --radio-border: var(--color-border-state-default);
  --radio-border-focused: var(--color-border-state-focused);
  --radio-border-hover: var(--color-border-state-hover);
  --radio-checked-bg-filled-hover: var(--color-fill-state-hover);
  --radio-label-focused: var(--color-text-state-hover);
  --radio-label-hover: var(--color-text-state-hover);
  --banner-text: var(--color-text-high-contrast);
  --banner-icon: var(--color-fill-state-default);
  --banner-box-shadow: var(--color-fill-state-default);
}