:root {
  --color-primary: hsl(0, 0%, 90%);
  --color-secondary: hsl(0, 0%, 50%);
  --color-lead: hsl(0, 0%, 60%);
  --color-shadow: #dddddd;
  --color-curtain: #00000099;
  --color-todo: gold;
  --color-link: #ddd;
  --color-visited: pink;
  --color-active: #ff9933;
  --color-accent: #ffcc33;
  --color-icon: var(--color-secondary);
  --color-background-opaque: hsla(130, 10%, 20%, 5%);
  --color-marker-inside: #ff3300;
  --color-marker-border: white;
  --color-note-contents: #ffffff;
  --color-text-dark: #444;
  --color-link-dark: mediumblue;
  --color-link-dark-visited: purple;
  --color-allowed: #00cc99;
  --color-forbidden: #ff3300;
}

:root {
  --background-block: linear-gradient(
    120deg,
    color-mix(in oklab, transparent 83%, var(--color-accent) 17%) 0%,
    color-mix(in oklab, transparent 87%, var(--color-accent) 13%) 20%,
    color-mix(in oklab, transparent 91%, var(--color-accent) 9%) 30%,
    color-mix(in oklab, transparent 89%, var(--color-accent) 11%) 60%,
    color-mix(in oklab, transparent 85%, var(--color-accent) 15%) 75%,
    color-mix(in oklab, transparent 81%, var(--color-accent) 19%) 100%
  );
}

:root {
  --theme-background-lead-accent: linear-gradient(
    135deg,
    #ffeeaa 0%,
    var(--color-accent) 60%,
    #ffcc00 100%
  );
  --theme-background-banner: #9a2791;
  --theme-background-block: var(--background-block);
  --theme-background-file-extension: #dddddd;
  --theme-background-page: var(--background-block), #0f0e15;
  --theme-color-accent: var(--color-accent);
  --theme-color-active: var(--color-active);
  --theme-color-card-text: var(--color-text-dark);
  --theme-color-card-link: var(--color-link-dark);
  --theme-color-card-link-visited: var(--color-link-dark-visited);
  --theme-color-dialog-closer: var(--color-primary);
  --theme-color-footer-text: var(--color-primary);
  --theme-color-map-text: var(--color-text-dark);
  --theme-color-separator: #ffffff33;
  --theme-color-tabs-icon: var(--color-primary);
  --theme-color-tabs-secondary: var(--color-primary);
  --theme-color-tabs-toggle: var(--color-text-dark);
  --theme-font-header-nav: normal 100% system-ui, sans-serif;
  --theme-font-heading: italic larger "Georgia", "Times New Roman", serif;
}