:root {
  /* fill */
  --fill-00: #ffffff;
  --fill-50: #f7f5f5;
  --fill-100: #f2f2f5;
  --fill-200: #e1e1e2;
  --fill-300: #d0d0d4;
  --fill-400: #a1a1aa;
  --fill-600: #52525b;
  --fill-900: #222020;

  /* text */
  --text-light-primary: #ffffff;
  --text-light-secondary: rgba(255, 255, 255, 0.7);
  --text-light-tertiary: rgba(255, 255, 255, 0.36);

  --text-dark-primary: #1a1a1a;
  --text-dark-secondary: rgba(26, 26, 26, 0.7);
  --text-dark-tertiary: rgba(26, 26, 26, 0.36);

  /* brands */
  --state-primary-active: #9a293f;
  --state-primary-hover: #8b0a25;
  --state-primary-selected: #8b0a2550;
  --fill-brand: #fce2d3;
  --text-marked: #fbf5ea;

  --colors-alpha-dark-200: rgba(26, 26, 26, 0.18);
  --colors-alpha-dark-400: rgba(26, 26, 26, 0.36);
  --colors-alpha-dark-600: rgba(26, 26, 26, 0.6);
  --colors-alpha-dark-900: #1a1a1a;
  --colors-alpha-light-600: rgba(255, 255, 255, 0.6);
  --colors-alpha-light-700: rgba(255, 255, 255, 0.7);
  --colors-orange-100: #ffedd6;

  --state-base-disabled: rgba(26, 26, 26, 0.18);
  /* border */
  --state-base-border: #e1e1e2;

  --state-destructive-active: #e21d48;
}