/* Tool-specific design tokens for Macro Health, layered on the shared family
   tokens (fonts, ground/ink colours, accent, themes) in shared/styles/tokens.css,
   which index.html links first. Only what is unique to this tool lives here: the
   status palette, the recession shading and the page layout variables. */
:root {
  --page-max: 1180px;
  --gap: 16px;
  --radius: 10px;
}

:root,
:root[data-theme="dark"] {
  /* Status palette. Three states, and meaning is never carried by colour alone — every
     status also gets a distinct glyph shape (see js/status.js) and a written label. */
  --ok: #46c98a;
  --warn: #d8a13c;
  --bad: #f16d61;
  --ok-bg: rgba(70, 201, 138, 0.12);
  --warn-bg: rgba(216, 161, 60, 0.14);
  --bad-bg: rgba(241, 109, 97, 0.13);
  /* Recession shading behind every chart. Low contrast on purpose: it is context, and it
     must never compete with the data line drawn over it. */
  --recession: rgba(255, 255, 255, 0.07);
}
:root[data-theme="light"] {
  --ok: #157a45;
  --warn: #8a6209;
  --bad: #c62f22;
  --ok-bg: rgba(21, 122, 69, 0.1);
  --warn-bg: rgba(138, 98, 9, 0.12);
  --bad-bg: rgba(198, 47, 34, 0.1);
  --recession: rgba(0, 0, 0, 0.07);
}