/* pocketBrain design tokens. One file, shared by the dashboard and the landing page.
   Near-monochrome with one accent (blue, for links, focus and the selected tab only).
   State colours (good, warn, bad) mean something; they are never decoration. */
:root {
  color-scheme: light;
  --bg: #ffffff;          /* page */
  --well: #f7f7f5;        /* header, table head, code, quotes */
  --hover: #efefed;       /* row and button hover, selected tab */
  --line: #e9e9e7;        /* every divider and border */
  --line-strong: #d3d3d0; /* inputs, hovered borders */
  --text: #1f1f1e;
  --text-2: #5f5e5b;      /* secondary text, 6.4:1 on white */
  --muted: #6f6e6a;       /* captions and meta, 5.1:1 on white, 4.8:1 on well */
  --ink: #1f1f1e;         /* primary button fill */
  --on-ink: #ffffff;
  --accent: #2a62d4;      /* links, focus ring, selected marker; 5.5:1 on white */
  --accent-soft: #edf2fc;
  --good: #2b7a48; --good-soft: #eaf4ed;
  --warn: #9a5b00; --warn-soft: #fbf1e1;
  --bad:  #c2332d; --bad-soft:  #fbeceb;

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale: size / line height */
  --t-12: 12px; --l-12: 16px;  /* captions, meta, table head */
  --t-13: 13px; --l-13: 20px;  /* tables, controls, dense UI */
  --t-14: 14px; --l-14: 20px;  /* body */
  --t-16: 16px; --l-16: 24px;  /* section titles */
  --t-24: 24px; --l-24: 32px;  /* page title */
  --t-32: 32px; --l-32: 40px;  /* landing section */
  --t-48: 48px; --l-48: 56px;  /* landing hero only */

  /* 8-point spacing; 4 is the only half step */
  --s-4: 4px; --s-8: 8px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;

  --r-4: 4px;  /* controls, tags */
  --r-6: 6px;  /* containers */
  --row: 32px; /* table row and control height */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #191919; --well: #202020; --hover: #2a2a2a; --line: #2e2e2e; --line-strong: #444443;
    --text: #ededec; --text-2: #a6a5a1; --muted: #8e8d89; --ink: #ededec; --on-ink: #191919;
    --accent: #6f9cf0; --accent-soft: #1d2a40;
    --good: #5db37c; --good-soft: #1b2c21; --warn: #d9a246; --warn-soft: #33281a; --bad: #ec6d66; --bad-soft: #3a1f1e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191919; --well: #202020; --hover: #2a2a2a; --line: #2e2e2e; --line-strong: #444443;
  --text: #ededec; --text-2: #a6a5a1; --muted: #8e8d89; --ink: #ededec; --on-ink: #191919;
  --accent: #6f9cf0; --accent-soft: #1d2a40;
  --good: #5db37c; --good-soft: #1b2c21; --warn: #d9a246; --warn-soft: #33281a; --bad: #ec6d66; --bad-soft: #3a1f1e;
}