/* Theme: every visual value lives here as a token. Components use only
   these tokens. To restyle, replace this file. See docs/UI.md. */
:root {
  /* color: the work list's palette (work-v1): ink on a warm off white
     page, white panels */
  --color-text: #141517;
  --color-muted: #62666b;
  --color-faint: #9a9ea3;
  --color-page: #f7f7f5;
  --color-bg: #fff;
  --color-bg-alt: #eef0f3;
  --color-bg-hover: #fafaf8;
  --color-line: #e6e6e2;
  --color-line-strong: #d3d3cd;
  --color-link: #141517;
  --color-accent: #141517;
  --color-accent-hover: #2a2d31;
  --color-on-accent: #fff;
  --color-nav-active: #2a2d31;
  --color-nav-bg: #15171a;
  --color-nav-text: #c3c7cc;
  --color-nav-muted: #7d8288;
  --color-nav-hover: #22252a;
  --color-danger: #b42318;
  --color-ok: #15803d;
  --color-ok-bg: #f0fdf4;
  --color-warn: #a16207;
  --color-warn-bg: #fefce8;
  --color-error: #b91c1c;
  --color-error-bg: #fef2f2;
  --color-added: #f0fdf4;
  --color-removed: #fef2f2;
  --color-chart-1: #3f3f46;
  --color-chart-2: #a1a1aa;
  --color-chart-3: #b91c1c;
  --color-chart-4: #d4d4d8;
  --color-chart-grid: #f4f4f5;

  /* badge hues: a small calm palette, soft background and darker text in
     the same hue. Every value we distinguish maps to one of these
     (views/labels.go); states keep their meaning: green, amber, red. */
  --hue-grey-bg: #f4f4f5;   --hue-grey-fg: #52525b;
  --hue-blue-bg: #eff4fb;   --hue-blue-fg: #3b5b8c;
  --hue-teal-bg: #eef7f5;   --hue-teal-fg: #2f6b62;
  --hue-violet-bg: #f3f1fa; --hue-violet-fg: #5b4f8a;
  --hue-amber-bg: #fdf3e2;  --hue-amber-fg: #a15c07;
  --hue-green-bg: #e6f2ea;  --hue-green-fg: #1f6b3a;
  --hue-red-bg: #fbefef;    --hue-red-fg: #9b3434;

  /* type */
  --font-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-md: 14.5px;
  --text-lg: 16px;
  --text-xl: 22px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --leading: 1.45;
  --tracking-caps: 0.04em;

  /* space: one 4px based scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* line, shape, depth */
  --border: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --radius: 8px;
  --radius-small: 5px;
  --radius-card: 10px;
  --radius-pill: 999px;
  --tab-underline: 2px;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
  --shadow-faint: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* sizes */
  --nav-width: 200px;
  --content-max: 1280px;
  --column-min: 360px;
  --form-width: 640px;
  --form-label: 11rem;
  --textarea-min: 80px;
  --text-measure: 80ch;
  --login-width: 360px;
  --filter-width: 240px;
  --swatch: 8px;
  --favicon: 16px;
  --dot: 7px;
  --row-button-height: 28px;
  --button-height: 32px;
  --control-height: 36px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2362666b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9ea3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --stat-min: 184px;
  --facts-key: 160px;
  --date-col: 84px;
  --num-col: 96px;
  --host-col: 180px;
  --kind-col: 110px;
  --sources-col: 120px;
}