:root {
  --color-neutrals-opaque-light-0: #ffffff;
  --color-neutrals-opaque-light-50: #f5f5f0;
  --color-neutrals-opaque-light-100: #eeeee8;
  --color-neutrals-opaque-light-150: #e6e6df;
  --color-neutrals-opaque-light-200: #dcdcd2;
  --color-neutrals-opaque-light-250: #d0d0c5;
  --color-neutrals-opaque-light-300: #c2c2b6;
  --color-neutrals-opaque-light-400: #a5a59a;
  --color-neutrals-opaque-light-500: #8a8a8a;
  --color-neutrals-opaque-light-600: #6b6b6b;
  --color-neutrals-opaque-light-700: #4a4a4a;
  --color-neutrals-opaque-light-800: #262626;
  --color-neutrals-opaque-light-900: #111111;

  --color-neutrals-alpha-light-50: #1111110a;
  --color-neutrals-alpha-light-100: #11111114;
  --color-neutrals-alpha-light-200: #1111111f;
  --color-neutrals-alpha-light-300: #11111129;
  --color-neutrals-alpha-light-400: #1111113d;
  --color-neutrals-alpha-light-500: #11111152;
  --color-neutrals-alpha-light-600: #1111117a;
  --color-neutrals-alpha-light-700: #111111a3;
  --color-neutrals-alpha-light-800: #111111cc;
  --color-neutrals-alpha-light-900: #111111eb;

  --color-brand-bg: #f4c2c2;
  --color-brand-hover: #eeb0b0;
  --color-brand-text-light: #111111;
  --color-brand-text-dark: #111111;
  --color-text-brand: #111111;
  --color-text-on-brand: #111111;
  --color-border-brand: #e59d9d;
}

:root[data-theme="dark"] {
  --color-neutrals-opaque-light-0: #0a0a0a;
  --color-neutrals-opaque-light-50: #111111;
  --color-neutrals-opaque-light-100: #181818;
  --color-neutrals-opaque-light-150: #202020;
  --color-neutrals-opaque-light-200: #282828;
  --color-neutrals-opaque-light-250: #303030;
  --color-neutrals-opaque-light-300: #3a3a3a;
  --color-neutrals-opaque-light-400: #565656;
  --color-neutrals-opaque-light-500: #8a8a8a;
  --color-neutrals-opaque-light-600: #a6a6a6;
  --color-neutrals-opaque-light-700: #c4c4c4;
  --color-neutrals-opaque-light-800: #e2e2e2;
  --color-neutrals-opaque-light-900: #f5f5f0;

  --color-neutrals-alpha-light-50: #f5f5f00a;
  --color-neutrals-alpha-light-100: #f5f5f014;
  --color-neutrals-alpha-light-200: #f5f5f01f;
  --color-neutrals-alpha-light-300: #f5f5f029;
  --color-neutrals-alpha-light-400: #f5f5f03d;
  --color-neutrals-alpha-light-500: #f5f5f052;
  --color-neutrals-alpha-light-600: #f5f5f07a;
  --color-neutrals-alpha-light-700: #f5f5f0a3;
  --color-neutrals-alpha-light-800: #f5f5f0cc;
  --color-neutrals-alpha-light-900: #f5f5f0eb;

  --color-brand-text-light: #f5f5f0;
  --color-brand-text-dark: #f5f5f0;
  --color-text-brand: #f5f5f0;
}

::selection {
  background: #f4c2c2;
  color: #111111;
}