/* kwd — the theme: names for specific parts of the site (charts, scrollbars, the
   keyword editor, health scores, the search engines), each pointing at one of the
   colours in tokens-base.css. Loads straight after it on every page.

   Nothing here is a colour of its own: to change what a part uses, point it at a
   different colour; to change a colour, change it in tokens-base.css. */

:root {
  /* Panels */
  --surface: var(--white);

  /* Scrollbars */
  --scrollbar: var(--ink-disabled);
  --scrollbar-hover: var(--ink-4);

  /* Charts and report pages */
  --chart-rank: var(--accent-2);
  --chart-good: var(--success);
  --chart-warn: var(--warning);
  --chart-bad: var(--danger);
  --chart-demand: var(--demand);
  --chart-feature: var(--feature);
  --chart-you: var(--you);
  --chart-you-ink: var(--you);
  --chart-grey: var(--border);
  --chart-none: var(--border-soft);
  --spark-flat: var(--ink-4);

  /* Health scores (Lighthouse's bands) and the search engines */
  --score-good: var(--success-strong);
  --score-ok: var(--warning-strong);
  --score-poor: var(--danger);
  --engine-google: var(--accent-strong);
  --engine-bing: var(--warning);
  --engine-yahoo: var(--you);

  /* The dashboard's keyword editor (dashboard.js reads these for Monaco) */
  --editor-ink: var(--white);
  --editor-bg: transparent;
  --editor-line-number: var(--ink-hero-3);
  --editor-line-number-active: var(--ink-hero);
  --editor-line: color-mix(in srgb,var(--white) 7%,transparent);
  --editor-cursor: var(--focus);
  --editor-selection: color-mix(in srgb,var(--focus) 26.67%,transparent);
  --editor-scrollbar: color-mix(in srgb,var(--white) 13.33%,transparent);
  --editor-duplicate: var(--caution);

  /* The viewer's "being updated" notice */
  --busy-ink: var(--ink-2);
  --busy-note: var(--ink-4);
}