/* ============================================================================
 * css/tokens/kyr.css — kyr's own look: the frame and kyr's pages when no
 * product face is composed (no data-face on <html>). Light by default; the
 * dark scheme is the terminal: near-black, cyan action, magenta structure.
 * --kyr-mark is kyr's structure colour, read only by kyr's own pages.
 * ==========================================================================*/

:where(:root:not([data-face])) {
  --k-bg: #f3f5f9;
  --k-surface: #ffffff;
  --k-surface-2: #e9edf5;
  --k-ink: #0b0f1c;
  --k-ink-2: #4e5668;
  --k-line: #d4dae6;
  --k-accent: #0c63f3;
  --k-on-accent: #ffffff;
  --k-focus: #0c63f3;
  --k-rail-bg: #edf0f6;
  --k-rail-ink: #3a4254;
  --k-rail-active-bg: #dbe5fb;
  --k-rail-active-ink: #0a46b8;
  --kyr-mark: #8f3ff0;
}

:where(:root:not([data-face])[data-theme="dark"]) {
  --k-bg: #050505;
  --k-surface: #111111;
  --k-surface-2: #181818;
  --k-ink: #f3f5f7;
  --k-ink-2: #9da3ad;
  --k-line: #292929;
  --k-accent: #00ccff;
  --k-on-accent: #020204;
  --k-focus: #00ccff;
  --k-danger: #ff5566;
  --k-warn: #f1c40f;
  --k-ok: #2ecc71;
  --k-radius: 6px;
  --k-shadow: 0 24px 64px rgb(0 0 0 / 0.6);
  --k-rail-bg: #0b0b0b;
  --k-rail-ink: #a3a9b3;
  --k-rail-active-bg: rgb(0 204 255 / 0.12);
  --k-rail-active-ink: #00ccff;
  --kyr-mark: #ff00ff;
}