/* ============================================================
   Design tokens — carried forward from discovery-checklist-v3
   (see docs/UI-NOTES.md). Every status is a {text, fill, border}
   TRIAD from one hue; fills stay muted/printable. State is never
   signaled by color alone — pair every status with a glyph.
   ============================================================ */
:root {
  --ink:    #1c2230;   /* primary text */
  --muted:  #6b7280;   /* secondary text, labels */
  --line:   #dde1e8;   /* hairline borders */
  --bg:     #f6f7f9;   /* page background */
  --card:   #ffffff;   /* surfaces */
  --accent: #2f4a7c;   /* focus rings, section titles, hover borders */
  --accent-bg: #e6ecf6;

  /* complete / good = green triad */
  --done:      #0f5c34;
  --done-bg:   #c7e6d3;
  --done-line: #94c7a7;

  /* review / attention = red triad */
  --rev:      #97231f;
  --rev-bg:   #f3cccb;
  --rev-line: #dfa09e;

  /* pending / in-progress = amber triad (new; same pattern) */
  --pend:      #7a5410;
  --pend-bg:   #f2e3bd;
  --pend-line: #d9c288;

  /* archived / disabled = grey triad */
  --off:      #565d6b;
  --off-bg:   #e8eaee;
  --off-line: #c9cdd6;

  --radius: 8px;
  --radius-lg: 10px;
  --shadow: 0 1px 3px rgba(28,34,48,.07);
  --font: "Heliotrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* CJ's licensed "Heliotrope" faces (MB Type), installed 2026-07-24.
   Two weights supplied: Heliotrope 3 (regular body) and Heliotrope 4
   (heavier — bold text, headings, buttons). Licensed for websites/apps.
   If the files are ever absent the browser falls back silently. */
@font-face {
  font-family: "Heliotrope";
  src: url("../fonts/Heliotrope3-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heliotrope";
  src: url("../fonts/Heliotrope4-Regular.ttf") format("truetype");
  font-weight: 500 700; font-style: normal; font-display: swap;
}