/* CivBot brand colours only (frontend/src/index.css), in three layers:
   1. raw --civbot-* colours, only in the two scheme blocks: the site tokens as
      they are (dark scheme: amber 9.2:1, blue 6.6:1) or shades of them, darker for
      WCAG AA text on white (5.7:1, 5.5:1) and lighter for the dark hover;
   2. roles: "where I am" (--civbot-color-nav-*, amber, as the site's active tab),
      "where to go" (--civbot-color-link*, blue, the site's info colour), tab icons;
   3. accent, link and navigation theme variables (--md-*) refer to roles; the
      scheme blocks also set the neutral text and background shades. */
[data-md-color-scheme="default"][data-md-color-primary="custom"] {
  --civbot-amber: oklch(0.52 0.11 68);
  --civbot-amber-tint: oklch(0.52 0.11 68 / 0.08);
  --civbot-blue: oklch(0.52 0.13 254);
  --civbot-blue-strong: oklch(0.45 0.13 256);
  --civbot-blue-tint: oklch(0.52 0.13 254 / 0.08);
  --civbot-green: oklch(0.62 0.17 145);
  --civbot-violet: oklch(0.55 0.22 300);
  --civbot-red: oklch(0.637 0.237 25.331);
  --civbot-sky: oklch(0.6 0.13 250);
  --civbot-bg: oklch(1 0 0);
  --md-default-fg-color: oklch(0.141 0.005 285.823 / 0.87);
  --md-default-fg-color--light: oklch(0.141 0.005 285.823 / 0.6);
  --md-default-fg-color--lighter: oklch(0.141 0.005 285.823 / 0.32);
  --md-default-fg-color--lightest: oklch(0.141 0.005 285.823 / 0.07);
  --md-primary-bg-color: var(--civbot-bg);
  --md-primary-bg-color--light: oklch(1 0 0 / 0.7);
}

[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --civbot-amber: oklch(0.78 0.16 75);
  --civbot-amber-tint: oklch(0.78 0.16 75 / 0.1);
  --civbot-blue: oklch(0.68 0.13 245);
  --civbot-blue-strong: oklch(0.76 0.11 243);
  --civbot-blue-tint: oklch(0.68 0.13 245 / 0.1);
  --civbot-green: oklch(0.7 0.16 150);
  --civbot-violet: oklch(0.63 0.2 305);
  --civbot-red: oklch(0.704 0.191 22.216);
  --civbot-sky: oklch(0.68 0.13 245);
  --civbot-bg: oklch(0.18 0 0);
  --civbot-surface: oklch(0.21 0 0);
  --md-default-bg-color: var(--civbot-bg);
  --md-default-bg-color--light: oklch(0.18 0 0 / 0.54);
  --md-default-bg-color--lighter: oklch(0.18 0 0 / 0.26);
  --md-default-bg-color--lightest: oklch(0.18 0 0 / 0.07);
  --md-default-fg-color: oklch(0.985 0 0 / 0.87);
  --md-default-fg-color--light: oklch(0.985 0 0 / 0.6);
  --md-default-fg-color--lighter: oklch(0.985 0 0 / 0.32);
  --md-default-fg-color--lightest: oklch(0.985 0 0 / 0.12);
  --md-code-bg-color: var(--civbot-surface);
  --md-footer-bg-color: var(--civbot-surface);
  --md-footer-bg-color--dark: var(--civbot-bg);
  --md-primary-bg-color: oklch(0 0 0 / 0.87);
  --md-primary-bg-color--light: oklch(0 0 0 / 0.54);
}

[data-md-color-primary="custom"] {
  --civbot-color-nav-active: var(--civbot-amber);
  --civbot-color-nav-active-bg: var(--civbot-amber-tint);
  --civbot-color-link: var(--civbot-blue);
  --civbot-color-link-hover: var(--civbot-blue-strong);
  --civbot-color-link-tint: var(--civbot-blue-tint);
  --civbot-color-brand: var(--civbot-amber);
  --civbot-color-icon-game: var(--civbot-amber);
  --civbot-color-icon-rating: var(--civbot-violet);
  --civbot-color-icon-server: var(--civbot-green);
  --civbot-color-icon-site: var(--civbot-sky);
  --civbot-color-icon-reference: var(--civbot-red);

  --md-typeset-a-color: var(--civbot-color-link);
  --md-primary-fg-color: var(--civbot-color-link);
  --md-primary-fg-color--light: var(--civbot-color-link-hover);
  --md-primary-fg-color--dark: var(--civbot-color-link);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--civbot-color-link-hover);
  --md-accent-fg-color--transparent: var(--civbot-color-link-tint);
  --md-accent-bg-color: var(--md-primary-bg-color);
  --md-accent-bg-color--light: var(--md-primary-bg-color--light);
}

/* The theme paints active navigation with the link colour; here it takes the
   "where I am" role. The header logo is the site's amber hexagon. */
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--civbot-color-nav-active);
}

.md-nav--primary .md-nav__item .md-nav__link--active {
  color: var(--civbot-color-nav-active);
  background: var(--civbot-color-nav-active-bg);
}

.md-header__button.md-logo {
  color: var(--civbot-color-brand);
}

.md-typeset {
  font-weight: 400;
}

/* Tab icons on the home page; a label always sits next to the icon. */
.civbot-icon-game { color: var(--civbot-color-icon-game); }
.civbot-icon-rating { color: var(--civbot-color-icon-rating); }
.civbot-icon-server { color: var(--civbot-color-icon-server); }
.civbot-icon-site { color: var(--civbot-color-icon-site); }
.civbot-icon-reference { color: var(--civbot-color-icon-reference); }

.md-typeset h1,
.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* The lead, the first paragraph after H1, is a little larger and lighter: the
   page can be judged at a glance. */
.md-typeset h1 + p {
  font-size: 1.1em;
  color: var(--md-default-fg-color--light);
}

/* Table of contents: groups heavier, nested items muted, the active group amber. */
.md-nav--secondary .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-default-fg-color--light);
}

.md-nav--secondary > .md-nav__list > .md-nav__item:has(> .md-nav) > .md-nav__link:not(.md-nav__link--active),
.md-nav--secondary .md-nav__link[href]:hover:not(.md-nav__link--active) {
  color: var(--md-default-fg-color);
}

.md-nav--secondary > .md-nav__list > .md-nav__item:has(> .md-nav) > .md-nav__link .md-typeset {
  font-weight: 500;
}

.md-nav--secondary > .md-nav__list > .md-nav__item:has(> .md-nav):not(:first-child) {
  margin-top: 0.8em;
}

.md-nav--secondary > .md-nav__list > .md-nav__item:has(> .md-nav .md-nav__link--active) > .md-nav__link {
  color: var(--civbot-color-nav-active);
}

.md-nav--secondary .md-nav__link {
  transition: color 0.3s ease;
}

/* A text fragment a link points to (::target-text) is tinted, not recoloured. */
.md-typeset ::target-text {
  color: inherit;
  background-color: var(--md-accent-fg-color--transparent);
  text-decoration: underline 0.12em var(--md-accent-fg-color);
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .md-nav--secondary .md-nav__link {
    transition: none;
  }
}