:root {
  /* light theme */
  --bg-1-light: #fafafaee;
  --bg-2-light: #ffffff;
  --text-color-light: #000000;
  --grey-light: #666666;
  --accent-1-light: violet;
  --accent-2-light: palevioletred;
  --shadow-color-light: rgba(0, 0, 0, 0.07);
  --code-bg-light: #1a1a1b;

  /* light sepia theme */
  --bg-1-light-sepia: papayaWhip;
  --bg-2-light-sepia: peachpuff;
  --text-color-light-sepia: #8b4513;
  --grey-light-sepia: #666666;
  --accent-1-light-sepia: violet;
  --accent-2-light-sepia: palevioletred;
  --shadow-color-light-sepia: rgba(0, 0, 0, 0.07);
  --code-bg-light-sepia: #1a1a1b;

  --bg-1-dark: rgb(0, 0, 0);
  --bg-2-dark: #1a1a1b;
  --text-color-dark: #ffffff;
  --grey-dark: #fafafa9f;
  --accent-1-dark: violet;
  --accent-2-dark: palevioletred;
  --shadow-color-dark: rgba(225, 225, 225, 0.1);
  --code-bg-dark: #1a1a1b;

  /* dark sepia theme */
  --bg-1-dark-sepia: #1a1a1b;
  --bg-2-dark-sepia: rgb(0, 0, 0);
  --text-color-dark-sepia: goldenrod;
  --grey-dark-sepia: #fafafa9f;
  --accent-1-dark-sepia: violet;
  --accent-2-dark-sepia: palevioletred;
  --shadow-color-dark-sepia: rgba(137, 105, 59, 0.2);
  --code-bg-dark-sepia:rgb(0, 0, 0)

  /* initialize with light theme */
  --text-color: var(--text-color-light);
  --grey: var(--grey-light);
  --bg-1: var(--bg-1-light);
  --bg-2: var(--bg-2-light);
  --accent-1: var(--accent-1-light);
  --accent-2: var(--accent-2-light);
  --shadow-color: var(--shadow-color-light);
  --code-bg: var(--code-bg-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: var(--text-color-dark);
    --grey: var(--grey-dark);
    --bg-1: var(--bg-1-dark);
    --bg-2: var(--bg-2-dark);
    --accent-1: var(--accent-1-dark);
    --accent-2: var(--accent-2-dark);
    --shadow-color: var(--shadow-color-dark);
    --code-bg: var(--code-bg-dark);
  }
}

@media (prefers-accent-color: red) {
  :root {
    --accent-1: red;
  }
}