/*
 * Material's variables, pointed at beacon-ui's colour tokens.
 *
 * tokens.css is generated at every build from beacon-ui's tokens/colors.json
 * (scripts/tokens.py) and switches on the root's data-theme. Everything
 * below refers to a token, never to a colour, so these declarations hold in
 * both modes and a change to the app's palette reaches the site with no edit
 * here. Where Material wants a shade no token names, it is mixed from tokens.
 *
 * Material's own palette (its `palette` setting and `data-md-color-scheme`)
 * is not used at all. See mkdocs.yml.
 */
:root {
  color-scheme: light;

  --md-primary-fg-color: var(--accent);
  --md-primary-fg-color--light: var(--accent);
  --md-primary-fg-color--dark: var(--accent);
  --md-primary-bg-color: var(--canvas);
  --md-primary-bg-color--light: var(--text-secondary);
  --md-accent-fg-color: var(--accent);
  --md-accent-fg-color--transparent: var(--info-bg);
  --md-accent-bg-color: var(--canvas);
  --md-accent-bg-color--light: var(--text-secondary);

  --md-default-fg-color: var(--text-primary);
  --md-default-fg-color--light: var(--text-secondary);
  --md-default-fg-color--lighter: var(--text-muted);
  --md-default-fg-color--lightest: var(--divider);
  --md-default-bg-color: var(--canvas);
  --md-default-bg-color--light: color-mix(in srgb, var(--canvas) 70%, transparent);
  --md-default-bg-color--lighter: color-mix(in srgb, var(--canvas) 30%, transparent);
  --md-default-bg-color--lightest: color-mix(in srgb, var(--canvas) 12%, transparent);

  /* A tint of the text colour, so code reads as set apart in either mode. */
  --md-code-fg-color: var(--text-primary);
  --md-code-bg-color: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --md-code-bg-color--light: color-mix(in srgb, var(--text-primary) 3%, transparent);
  --md-code-bg-color--lighter: color-mix(in srgb, var(--text-primary) 2%, transparent);
  --md-code-hl-color: var(--accent);
  --md-code-hl-color--light: var(--info-bg);

  /* Syntax colours from the chart series, so code matches the app's charts. */
  --md-code-hl-keyword-color: var(--accent);
  --md-code-hl-string-color: var(--success);
  --md-code-hl-number-color: var(--series-3);
  --md-code-hl-constant-color: var(--series-3);
  --md-code-hl-function-color: var(--series-2);
  --md-code-hl-special-color: var(--danger);
  --md-code-hl-name-color: var(--text-primary);
  --md-code-hl-operator-color: var(--text-secondary);
  --md-code-hl-punctuation-color: var(--text-secondary);
  --md-code-hl-comment-color: var(--text-muted);
  --md-code-hl-generic-color: var(--text-secondary);
  --md-code-hl-variable-color: var(--text-secondary);

  --md-typeset-color: var(--text-primary);
  --md-typeset-a-color: var(--accent);
  --md-typeset-del-color: var(--status-failed-bg);
  --md-typeset-ins-color: var(--status-done-bg);
  --md-typeset-kbd-color: var(--canvas);
  --md-typeset-kbd-accent-color: var(--canvas);
  --md-typeset-kbd-border-color: var(--border);
  --md-typeset-mark-color: var(--status-running-bg);
  --md-typeset-table-color: var(--divider);
  --md-typeset-table-color--light: color-mix(in srgb, var(--divider) 40%, transparent);

  --md-admonition-fg-color: var(--text-primary);
  --md-admonition-bg-color: var(--canvas);
  --md-warning-fg-color: var(--status-running-text);
  --md-warning-bg-color: var(--status-running-bg);

  --md-footer-fg-color: var(--text-secondary);
  --md-footer-fg-color--light: var(--text-muted);
  --md-footer-fg-color--lighter: var(--text-muted);
  --md-footer-bg-color: var(--canvas);
  --md-footer-bg-color--dark: var(--canvas);

  /* The app draws edges with hairlines, not shadows. Only floating panels
     (search results, the mobile drawer) keep a soft one. */
  --md-shadow-z1: none;
  --md-shadow-z2: 0 0 0 0.5px var(--chrome-border);
  --md-shadow-z3: 0 4px 16px color-mix(in srgb, var(--text-primary) 12%, transparent),
    0 0 0 0.5px var(--chrome-border);
}

/* Native controls, scrollbars and the caret follow the mode, as in the app. */
:root[data-theme='dark'] {
  color-scheme: dark;
}

/*
 * One size of rem at every width. Material enlarges the root font on wide
 * screens (to 137.5% and then 150%), which would take body text past the
 * 16px the type scale starts from. 125% makes Material's 0.8rem exactly 16px.
 * Its wider-screen rules sit earlier in the cascade with the same weight as
 * this one, so this wins at every width.
 */
html {
  font-size: 125%;
}

body {
  background: var(--canvas);
  color: var(--text-primary);
}

::selection {
  background: var(--info-bg);
}