/* The palettes. Shared by every page in the extension — the dashboard and
   the docs viewer — so a theme is defined once and applies everywhere. */

/* Native controls — checkboxes, date pickers, scrollbars — are painted by the
   browser, and `color-scheme: light dark` tells it to ask the *operating
   system* which way. That is the wrong authority: the palette is chosen here,
   by the theme button, and on a dark-mode machine a light page was drawing
   black checkboxes into white panels. So each palette declares which kind it
   is, and the browser paints to match what is actually on screen. */
:root, :root[data-theme="light"] { color-scheme: light; }
:root[data-theme="medium"], :root[data-theme="dark"] { color-scheme: dark; }

/* One set of tokens, three palettes. Every colour in the stylesheet comes
   through here, so a theme is nothing but a different set of values. */
:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #eef2f7;      /* group bands, board columns */
  --hover: #f0f4fa;
  --hover-selected: #dbe7fb;
  --ink: #1d2433;
  --muted: #6b7280;
  --faint: #c3c9d4;        /* drag handles, the ＋ affordances */
  --line: #e5e7eb;
  --accent: #0c66e4;
  --accent-strong: #0a55bd;
  --accent-soft: #e8f0fe;
  --danger: #c9372c;
  --danger-soft: #fde8e6;
  --warn: #b45309;
  --ok: #1f845a;
  --ok-soft: #e3f4ec;        /* the added half of a diff, opposite --danger-soft */
  --avatar-bg: #dfe1e6;
  --avatar-ink: #44546f;
  --toast-bg: #1d2433;
  --toast-ink: #ffffff;
  --toast-link: #8ab4f8;
  --radius: 8px;
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

/* Medium: dim slate — easy in a dark room without going full dark. */
:root[data-theme="medium"] {
  --bg: #222835;
  --panel: #2a3140;
  --panel-2: #323a4c;
  --hover: #333d4f;
  --hover-selected: #3a4a63;
  --ink: #dfe4ec;
  --muted: #9aa4b5;
  --faint: #5d6a80;
  --line: #3c4557;
  --accent: #6ea8fe;
  --accent-strong: #8ab8ff;
  --accent-soft: #2d3d59;
  --danger: #e5534b;
  --danger-soft: #4a2b28;
  --warn: #d29922;
  --ok: #3fb27f;
  --ok-soft: #24402f;
  --avatar-bg: #47526a;
  --avatar-ink: #dfe4ec;
  --toast-bg: #0d1017;
  --toast-ink: #e6e6e6;
  --toast-link: #8ab4f8;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] {
  --bg: #0e1116;
  --panel: #151a21;
  --panel-2: #1a2029;
  --hover: #1c232e;
  --hover-selected: #223047;
  --ink: #d6dce5;
  --muted: #8a93a2;
  --faint: #49556a;
  --line: #262d38;
  --accent: #539bf5;
  --accent-strong: #79b0f7;
  --accent-soft: #1b2a41;
  --danger: #e5534b;
  --danger-soft: #42211e;
  --warn: #c69026;
  --ok: #3fb27f;
  --ok-soft: #1e3a2b;
  --avatar-bg: #333c4d;
  --avatar-ink: #d6dce5;
  --toast-bg: #000000;
  --toast-ink: #e6e6e6;
  --toast-link: #8ab4f8;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}