/* Global customization */
:root {
  --color-0: #6f2232;
  --color-0-darker: #43141e;
  --color-1: #1a1a1d;
  --color-2: #959596;
  --color-2-darker: #4e4e50;
  --color-3: #f1e9eb;
  --color-4: #b89a99;

  --dark-header-background: var(--color-0);
  --dark-header-font-color: var(--color-3);
  --dark-body-background: var(--color-1);
  --dark-link-color: var(--color-2);
  --dark-link-color-visited: var(--color-2-darker);

  --light-header-background: var(--color-4);
  --light-header-font-color: var(--color-1);
  --light-body-background: var(--color-3);
  --light-link-color: var(--color-0);
  --light-link-color-visited: var(--color-0-darker);
}

/* Light mode theming */
:root, :root[color-mode="light"], :root[color-theme="light"] {
  --header-background: var(--light-header-background);
  --header-font-color: var(--light-header-font-color);
  --body-background: var(--light-body-background);
  --link-color: var(--light-link-color);
  --link-color-visited: var(--light-link-color-visited);

  --body-font-color: var(--header-font-color);
  --button-background: var(--header-background);
  --button-border-color: var(--header-font-color);
  --code-background: var(--header-background);
  --code-accent-color: var(--link-color);
  --code-accent-color-lite: var(--link-color-visited);
  --accent-color: var(--header-background);
  --accent-color-lite: var(--header-background);
  --control-icons: var(--header-font-color);
  --footer-background: var(--header-background);
  --footer-font-color: var(--header-font-color);
  --footer-link-color: var(--link-color);
  --footer-link-color-visited: var(--link-color-visited);
}
@media (prefers-color-scheme: light) {
  :root {
    --header-background: var(--light-header-background);
    --header-font-color: var(--light-header-font-color);
    --body-background: var(--light-body-background);
    --link-color: var(--light-link-color);
    --link-color-visited: var(--light-link-color-visited);
  }
}

/* Dark mode theming */
:root[color-mode="dark"], :root[color-theme="dark"] {
  --header-background: var(--dark-header-background);
  --header-font-color: var(--dark-header-font-color);
  --body-background: var(--dark-body-background);
  --link-color: var(--dark-link-color);
  --link-color-visited: var(--dark-link-color-visited);

  --body-font-color: var(--header-font-color);
  --button-background: var(--header-background);
  --button-border-color: var(--header-font-color);
  --code-background: var(--header-background);
  --code-accent-color: var(--link-color);
  --code-accent-color-lite: var(--link-color-visited);
  --accent-color: var(--header-background);
  --accent-color-lite: var(--header-background);
  --control-icons: var(--header-font-color);
  --footer-background: var(--header-background);
  --footer-font-color: var(--header-font-color);
  --footer-link-color: var(--link-color);
  --footer-link-color-visited: var(--link-color-visited);
}
@media (prefers-color-scheme: dark) {
  :root {
    --header-background: var(--dark-header-background);
    --header-font-color: var(--dark-header-font-color);
    --body-background: var(--dark-body-background);
    --link-color: var(--dark-link-color);
    --link-color-visited: var(--dark-link-color-visited);
  }
}

::placeholder {
    color: var(--body-font-color);
}