:root {
  /* Accent 1 */
  --a1-0: #ffffff;
  --a1-10: #fffbff;
  --a1-50: #f9e0fe;
  --a1-100: #f0dafe;
  --a1-200: #d6bce9;
  --a1-300: #b9a2cc;
  --a1-400: #9e87b1;
  --a1-500: #846f96;
  --a1-600: #6a557c;
  --a1-700: #533f64;
  --a1-800: #3a294b;
  --a1-900: #241536;

  /* Accent 2 */
  --a2-0: #ffffff;
  --a2-10: #fffbff;
  --a2-50: #f9e0fe; 
  --a2-100: #fdddd7;
  --a2-200: #cfc1da;
  --a2-300: #b4a6bf;
  --a2-400: #9a8ca3;
  --a2-500: #7f7189;
  --a2-600: #665a6e;
  --a2-700: #4c4356;
  --a2-800: #352c3f;
  --a2-900: #211829;

  /* Accent 3 */
  --a3-0: #ffffff;
  --a3-10: #fffbff;
  --a3-50: #ffecf2;
  --a3-100: #fed8e7;
  --a3-200: #f1b6d2;
  --a3-300: #d398b4;
  --a3-400: #b78199;
  --a3-500: #9c687f;
  --a3-600: #835068;
  --a3-700: #653950;
  --a3-800: #4a2338;
  --a3-900: #330d22;

  /* Neutral 1 */
  --n1-0: #ffffff;
  --n1-10: #fffbff;
  --n1-50: #f6f6f6;
  --n1-100: #e7e0e7;
  --n1-200: #cbc4cb;
  --n1-300: #afa8af;
  --n1-400: #948f95;
  --n1-500: #7b757b;
  --n1-600: #625d63;
  --n1-700: #4a454b;
  --n1-800: #343235;
  --n1-900: #1d1b20;

  /* Neutral 2 */
  --n2-0: #ffffff;
  --n2-10: #fffbff;
  --n2-50: #f8edfb;
  --n2-100: #e9dfea;
  --n2-200: #cdc3ce;
  --n2-300: #b2a8b3;
  --n2-400: #968e99;
  --n2-500: #7c747f;
  --n2-600: #635b66;
  --n2-700: #4b464d;
  --n2-800: #342f36;
  --n2-900: #1d1a21;
}

/* White */
:root.white {
  --bg: var(--n1-50);
  --logo: var(--a1-600);
  --text: #00000;
  --acc: var(--a1-600);
  --button: var(--a1-300);
  --ubutton: var(--a1-400);
} 

/* Black */
:root.black {
  --bg: var(--n1-900);
  --logo: var(--a1-200);
  --text: #ffffff;
  --acc: var(--a1-200);
  --button: var(--a1-300);
  --ubutton: var(--a1-400);
}