:root {
  font-size: 16px;
}

: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-file-extension: var(--color-shadow);
  --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;
  --color-banner: #9a2791;
}

:root {
  --background-base: #222222;
  --background-block: linear-gradient(
    120deg,
    color-mix(in oklab, var(--background-base) 83%, var(--color-accent) 17%) 0%,
    color-mix(in oklab, var(--background-base) 87%, var(--color-accent) 13%) 20%,
    color-mix(in oklab, var(--background-base) 91%, var(--color-accent) 9%) 30%,
    color-mix(in oklab, var(--background-base) 89%, var(--color-accent) 11%) 60%,
    color-mix(in oklab, var(--background-base) 85%, var(--color-accent) 15%) 75%,
    color-mix(in oklab, var(--background-base) 81%, var(--color-accent) 19%) 100%
  );
  --background-card-meta: linear-gradient(
      138deg,
      rgba(251, 223, 181, 1) 0%,
      rgba(236, 245, 193, 1) 50%,
      rgba(242, 217, 239, 1) 100%
    );
  --background-lead-accent: linear-gradient(
      135deg,
      #ffeeaa 0%,
      var(--color-accent) 60%,
      #ffcc00 100%
  );
}

:root {
  --block-background: var(--background-block);
  --block-border-color: #444444;
  --block-border-style: dashed solid solid dashed;
  --block-border-width: 1px;
  --block-border-radius: var(--common-border-radius);
}

:root {
  --size-large: 2.3rem;
  --size-double: calc(var(--size-medium) * 2);
  --size-medium: calc(var(--size-large) / 2.5);
  --size-small: calc(var(--size-medium) / 2);
  --size-tiny: calc(var(--size-small) / 2);
}

:root {
  --margin-width: minmax(0, calc((100vw - 1em * 70) / 2));
}

:root {
  --zindex-basic: 10050;
  --zindex-curtain: 10055;
  --zindex-modal: 10060;
}

:root {
  --font-cite: italic smaller system-ui, sans-serif;
  --font-default: normal 100% system-ui, sans-serif;
  --font-file-extension: normal small-caps 100% system-ui, sans-serif;
  --font-header-nav: normal 100% system-ui, sans-serif;
  --font-heading: italic larger "Georgia", "Times New Roman", serif;
  --font-lead: normal x-large system-ui, sans-serif;
  --font-lead-accent: italic bold 100% "Georgia", "Times New Roman", serif;
  --font-icon: normal 100% NotoEmoji;
  --font-label: italic bold 100% system-ui, sans-serif;
  --font-link-note: normal 100% system-ui, sans-serif;
  --font-map: normal 75% system-ui, sans-serif;
}

:root {
  --common-border-radius: var(--size-tiny);
  --common-gap-block: var(--size-medium);
  --common-gap-inline: var(--size-medium);
  --common-gap: var(--common-gap-block) var(--common-gap-inline);
  --common-gap-with-smaller-vertical: var(--size-small) var(--common-gap-inline);
  --common-pseudolink-text-decoration: underline dotted;
  --common-pseudolink-text-decoration-line: underline;
  --common-pseudolink-text-decoration-style: dotted;
  --common-pseudolink-text-decoration-thickness: 1px;
  --common-pseudolink-text-underline-offset: .25ex;
  --common-text-shadow-glow: 0 0 .25ex var(--color-accent);
}