/*
 * The palette, once.
 *
 * Every surface in the product reads from these ten names: this page, the
 * wallet page next to it, and — mapped onto its own token names — the
 * extension's theme.css. They were copied by hand into each for a while, which
 * is a divergence waiting for the first retune, so check:site now compares
 * this file against theme.css value by value, in light and in dark.
 *
 * Dark is declared twice on purpose. The media query follows the OS for
 * somebody who has expressed no preference; the attribute is what a page sets
 * when the user has. Neither is redundant.
 */
:root {
  /* Front-of-house palette, carried over from Make My Jeopardy's design
     system so Cardful reads as part of the same portfolio. */
  --color-paper: #ffffff;
  --color-paper-soft: #f6f8fc;
  --color-paper-sunk: #eef1f7;
  --color-line-soft: #e2e6ee;
  --color-slate: #1b1f2a;
  --color-slate-soft: #5b6272;
  --color-slate-faint: #858c9c;
  --color-action: #1a20ee;
  --color-action-dark: #0f14c4;
  --color-action-wash: #eef0ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #101218;
    --color-paper-soft: #171a22;
    --color-paper-sunk: #1d212b;
    --color-line-soft: #2a2f3b;
    --color-slate: #eef0f5;
    --color-slate-soft: #a7adbb;
    --color-slate-faint: #767c8c;
    --color-action: #6f76ff;
    --color-action-dark: #8b91ff;
    --color-action-wash: #1c1f3a;
  }
}
:root[data-theme="dark"] {
  --color-paper: #101218;
  --color-paper-soft: #171a22;
  --color-paper-sunk: #1d212b;
  --color-line-soft: #2a2f3b;
  --color-slate: #eef0f5;
  --color-slate-soft: #a7adbb;
  --color-slate-faint: #767c8c;
  --color-action: #6f76ff;
  --color-action-dark: #8b91ff;
  --color-action-wash: #1c1f3a;
}