/* ============================================================
   COLORS
   The brand is a black-and-white duet plus grayscale. There is
   no second accent. The only chromatic value is the browser
   default link blue inside legal/footer fine print.
   ============================================================ */

:root {
  /* ---- Brand & conversion ---- */
  --color-primary: #000000;        /* Ink Black — the only conversion colour */
  --color-on-primary: #ffffff;     /* text/icon on the black pill */
  --color-surface-pressed: #e2e2e2;/* pressed fill for white pills */
  --color-black-elevated: #282828; /* hover for translucent tab-toggle */

  /* ---- Surface ---- */
  --color-canvas: #ffffff;         /* default page background */
  --color-canvas-soft: #efefef;    /* chips, input rows, subtle pills */
  --color-canvas-softer: #f3f3f3;  /* nested-input fill on white surfaces */

  /* ---- Text ---- */
  --color-ink: #000000;            /* headings + body on light */
  --color-body: #5e5e5e;           /* secondary / supporting copy */
  --color-hairline-mid: #4b4b4b;   /* muted footer links, breadcrumbs */
  --color-mute: #afafaf;           /* placeholder, fine print, low-priority */
  --color-on-dark: #ffffff;        /* text on ink surfaces */

  /* ---- Lines ---- */
  --color-hairline: #e2e2e2;       /* faq dividers, subtle separators */

  /* ---- Semantic (intentionally minimal) ---- */
  --color-link: #0000ee;           /* browser-default blue — legal/footer only */
}