:root {
  /* Light Theme */

  --light-background: #000000;
  --light-background-2: #f5f5f5;
  --light-background-3: #c4c4ca;

  --light-text: #e6e6e6;
  --light-text-2: #484851;
  --light-text-3: #909098;

  --light-red-text: #E90E3A;
  --light-red-bg: #e90e3a1a;

  --light-brand: #1D9BF01A;

  /* Dark Theme */

  --dark-background: #000000;
  --dark-background-2: #101012;
  --dark-background-3: #1a1a1e;

  --dark-text: #e6e6e6;
  --dark-text-2: #909098;
  --dark-text-3: #484851;

  --dark-red-text: #E90E3A;
  --dark-red-bg: #e90e3a1a;

  --dark-brand: #1D9BF01A;

}

[data-theme="light"] {
  --background: var(--light-background);
  --background-2: var(--light-background-2);
  --background-3: var(--light-background-3);

  --text: var(--light-text);
  --text-2: var(--light-text-2);
  --text-3: var(--light-text-3);

  --red-text: var(--light-red-text);
  --red-bg: var(--light-red-bg);

  --brand: var(--light-brand);

}

[data-theme="dark"] {
  --background: var(--dark-background);
  --background-2: var(--dark-background-2);
  --background-3: var(--dark-background-3);

  --text: var(--dark-text);
  --text-2: var(--dark-text-2);
  --text-3: var(--dark-text-3);

  --red-text: var(--dark-red-text);
  --red-bg: var(--dark-red-bg);

  --brand: var(--dark-brand);

}

[data-theme=""] {
  --background: var(--dark-background);
  --background-2: var(--dark-background-2);
  --background-3: var(--dark-background-3);

  --text: var(--dark-text);
  --text-2: var(--dark-text-2);
  --text-3: var(--dark-text-3);

  --red-text: var(--dark-red-text);
  --red-bg: var(--dark-red-bg);

  --brand: var(--dark-brand);

}