:root {
  --color-brand-50: #fdf2f5;
  --color-brand-100: #fce7ed;
  --color-brand-500: #dc2c5d;
  --color-brand-600: #c72177;
  --color-brand-800: #8b1a55;

  --color-dark-brand-50: #2d0f1a;
  --color-dark-brand-100: #3d1424;
  --color-dark-brand-500: #c72177;
  
  --color-neutral-0: #FAFAFA;
  --color-neutral-50: #EFEFEF;
  --color-neutral-100: #DADADA;
  --color-neutral-600: #A0A0A0;
  --color-neutral-800: #707070;
  --color-neutral-1000: #444444;

  --color-dark-neutral-0: #111111;
  --color-dark-neutral-50: #191919;
  --color-dark-neutral-100: #252525;
  --color-dark-neutral-600: #404040;
  --color-dark-neutral-800: #606060;

  --color-red-50: #3A1F1F;
  --color-red-300: #B55353;
  --color-red-500: #D16060;
  --color-red-600: #E57070;
  --color-red-800: #FF7A7A;
  --color-red-1000: #2A1414;

  --color-green-50: #1F3A30;
  --color-green-300: #3FA489;
  --color-green-500: #50C19E;
  --color-green-1000: #19332D;

  --color-yellow-50: #3A341F;
  --color-yellow-300: #D09F40;
  --color-yellow-500: #FFBD45;
  --color-yellow-1000: #2B2410;

  --color-blue-50: #1F233A;
  --color-blue-300: #5F70B0;
  --color-blue-500: #6F85E0;
  --color-blue-1000: #181C30;
}



/* tokens */
html[data-theme="light"] {
  /* text & icons */
  --color-text-default: var(--color-neutral-1000);
  --color-text-description: var(--color-neutral-800);
  --color-text-disabled: var(--color-neutral-600);
  --color-text-button: var(--color-neutral-0);
  --color-text-brand: var(--color-brand-500);
  --color-text-brand-hover: var(--color-brand-600);
  --color-text-brand-active: var(--color-brand-800);
  --color-text-neutral-light: var(--color-neutral-50);
  --color-text-neutral: var(--color-neutral-100);
  --color-text-success: var(--color-green-500);
  --color-text-warning: var(--color-yellow-500);
  --color-text-error: var(--color-red-500);
  --color-text-alternative: var(--color-blue-500);
  /* background */
  --color-bg-default: var(--color-neutral-0);
  --color-bg-accent: var(--color-neutral-50);
  --color-bg-neutral: var(--color-neutral-600);
  --color-bg-brand: var(--color-brand-500);
  --color-bg-brand-hover: var(--color-brand-600);
  --color-bg-brand-active: var(--color-brand-800);
  --color-bg-brand-light: var(--color-brand-50);
  --color-bg-brand-light-hover: var(--color-brand-100);
  --color-bg-error-light: var(--color-red-50);
  --color-bg-error: var(--color-red-500);
  --color-bg-error-hover: var(--color-red-600);
  --color-bg-error-active: var(--color-red-800);
  --color-bg-success-light: var(--color-green-50);
  --color-bg-success: var(--color-green-500);
  --color-bg-warning-light: var(--color-yellow-50);
  --color-bg-warning: var(--color-yellow-500);
  --color-bg-alternative-light: var(--color-blue-50);
  --color-bg-alternative: var(--color-blue-500);
  /* border */
  --color-border-default: var(--color-neutral-100);
  --color-border-accent: var(--color-neutral-600);
  --color-border-brand: var(--color-brand-500);
  --color-border-brand-light: var(--color-brand-100);
  --color-border-error: var(--color-red-500);
  --color-border-inverse: var(--color-neutral-0);
}

html[data-theme="dark"] {
  /* text & icons */
  --color-text-default: var(--color-neutral-0);
  --color-text-description: var(--color-dark-neutral-800);
  --color-text-disabled: var(--color-dark-neutral-600);
  --color-text-button: var(--color-neutral-0);
  --color-text-brand: var(--color-dark-brand-500);
  --color-text-brand-hover: var(--color-brand-500);
  --color-text-brand-active: var(--color-brand-600);
  --color-text-neutral-light: var(--color-dark-neutral-50);
  --color-text-neutral: var(--color-dark-neutral-100);
  --color-text-success: var(--color-green-300);
  --color-text-warning: var(--color-yellow-300);
  --color-text-error: var(--color-red-300);
  --color-text-alternative: var(--color-blue-300);
  /* background */
  --color-bg-default: var(--color-dark-neutral-0);
  --color-bg-accent: var(--color-dark-neutral-50);
  --color-bg-neutral: var(--color-dark-neutral-600);
  --color-bg-brand: var(--color-dark-brand-500);
  --color-bg-brand-hover: var(--color-brand-500);
  --color-bg-brand-active: var(--color-brand-600);
  --color-bg-brand-light: var(--color-dark-brand-50);
  --color-bg-brand-light-hover: var(--color-dark-brand-100);
  --color-bg-error-light: var(--color-red-1000);
  --color-bg-error: var(--color-red-300);
  --color-bg-error-hover: var(--color-red-500);
  --color-bg-error-active: var(--color-red-600);
  --color-bg-success-light: var(--color-green-1000);
  --color-bg-success: var(--color-green-300);
  --color-bg-warning-light: var(--color-yellow-1000);
  --color-bg-warning: var(--color-yellow-300);
  --color-bg-alternative-light: var(--color-blue-1000);
  --color-bg-alternative: var(--color-blue-300);
  /* border */
  --color-border-default: var(--color-dark-neutral-100);
  --color-border-accent: var(--color-dark-neutral-600);
  --color-border-brand: var(--color-dark-brand-500);
  --color-border-brand-light: var(--color-dark-brand-100);
  --color-border-error: var(--color-red-300);
  --color-border-inverse: var(--color-dark-neutral-0);
}