/*
 * Design tokens.
 * Base UI values follow Wikimedia Codex (https://doc.wikimedia.org/codex/),
 * accents follow the Wikidata palette: red #990000, green #339966, blue #006699.
 * Kept self-hosted: Toolforge tools must not load third-party CDNs.
 */
:root {
  color-scheme: light;

  /* Codex: backgrounds */
  --wc-bg-base: #ffffff;
  --wc-bg-subtle: #f8f9fa;
  --wc-bg-interactive: #eaecf0;
  --wc-bg-interactive-hover: #dadde3;
  --wc-bg-progressive: #36c;
  --wc-bg-progressive-hover: #3056a9;
  --wc-bg-progressive-subtle: #f1f4fd;
  --wc-bg-backdrop: rgba(255, 255, 255, 0.65);

  /* Codex: text */
  --wc-color-base: #202122;
  --wc-color-emphasized: #101418;
  --wc-color-subtle: #54595d;
  --wc-color-placeholder: #72777d;
  --wc-color-inverted: #ffffff;
  --wc-color-progressive: #36c;
  --wc-color-destructive: #bf3c2c;
  --wc-color-success: #177860;
  --wc-color-link-visited: #6a60b0;

  /* Codex: borders */
  --wc-border-base: #a2a9b1;
  --wc-border-subtle: #c8ccd1;
  --wc-border-muted: #dadde3;
  --wc-border-progressive: #36c;

  /* Wikidata brand accents */
  --wc-wd-red: #990000;
  --wc-wd-green: #339966;
  --wc-wd-blue: #006699;

  /* Crawl categories ("kinds") */
  --wc-kind-wikilink: #006699;
  --wc-kind-redlink: #990000;
  --wc-kind-media: #339966;
  --wc-kind-external: #6a60b0;
  --wc-kind-reference: #9a5b00;
  --wc-kind-date: #0e7c86;
  --wc-kind-word: #72777d;

  /* Shape & type */
  --wc-radius: 2px;
  --wc-radius-lg: 4px;
  --wc-shadow: 0 2px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --wc-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.18);
  /* As Wikipedia's Vector 2022 skin: the reader's default sans-serif (Arial on Windows)
     and Vector's heading serif. */
  --wc-font-sans: sans-serif;
  --wc-font-serif: "Linux Libertine", "Georgia", "Times", "Source Serif Pro", serif;
  --wc-font-mono: Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --wc-header-h: 64px;
  --wc-bar-h: 52px;
}

/* Night mode values mirror Codex's dark theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wc-bg-base: #101418;
    --wc-bg-subtle: #1b1e22;
    --wc-bg-interactive: #27292d;
    --wc-bg-interactive-hover: #404244;
    --wc-bg-progressive: #6485d1;
    --wc-bg-progressive-hover: #88a3e8;
    --wc-bg-progressive-subtle: #1b223d;
    --wc-bg-backdrop: rgba(16, 20, 24, 0.7);
    --wc-color-base: #eaecf0;
    --wc-color-emphasized: #f8f9fa;
    --wc-color-subtle: #a2a9b1;
    --wc-color-placeholder: #898e94;
    --wc-color-inverted: #101418;
    --wc-color-progressive: #88a3e8;
    --wc-color-destructive: #fd7865;
    --wc-color-success: #3dc29b;
    --wc-color-link-visited: #a799cd;
    --wc-border-base: #72777d;
    --wc-border-subtle: #54595d;
    --wc-border-muted: #404244;
    --wc-border-progressive: #88a3e8;
    --wc-kind-wikilink: #4fa8d8;
    --wc-kind-redlink: #f2766b;
    --wc-kind-media: #4cc38a;
    --wc-kind-external: #a799cd;
    --wc-kind-reference: #e0a650;
    --wc-kind-date: #3fbcc4;
    --wc-kind-word: #a2a9b1;
    --wc-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --wc-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wc-bg-base: #101418;
  --wc-bg-subtle: #1b1e22;
  --wc-bg-interactive: #27292d;
  --wc-bg-interactive-hover: #404244;
  --wc-bg-progressive: #6485d1;
  --wc-bg-progressive-hover: #88a3e8;
  --wc-bg-progressive-subtle: #1b223d;
  --wc-bg-backdrop: rgba(16, 20, 24, 0.7);
  --wc-color-base: #eaecf0;
  --wc-color-emphasized: #f8f9fa;
  --wc-color-subtle: #a2a9b1;
  --wc-color-placeholder: #898e94;
  --wc-color-inverted: #101418;
  --wc-color-progressive: #88a3e8;
  --wc-color-destructive: #fd7865;
  --wc-color-success: #3dc29b;
  --wc-color-link-visited: #a799cd;
  --wc-border-base: #72777d;
  --wc-border-subtle: #54595d;
  --wc-border-muted: #404244;
  --wc-border-progressive: #88a3e8;
  --wc-kind-wikilink: #4fa8d8;
  --wc-kind-redlink: #f2766b;
  --wc-kind-media: #4cc38a;
  --wc-kind-external: #a799cd;
  --wc-kind-reference: #e0a650;
  --wc-kind-date: #3fbcc4;
  --wc-kind-word: #a2a9b1;
  --wc-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --wc-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.6);
}