/* Tool-specific design tokens for Market Rotation, 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
   quadrant palette and the chart/rail layout variables. See docs/DESIGN.md. */
:root {
  /* Quadrant hues live in both themes; overridden per theme below. */
  --leading: #33a06e; /* deep green   */
  --weakening: #c1a054; /* muted ochre  */
  --lagging: #cb4a3e; /* deep red     */
  --improving: #3f9ba3; /* muted teal   */

  --rail-w: 340px;
  --bar-h: 41px; /* shared height of the bottom bars (toolbar + rail legend) */
  --fade-inner: 0.52; /* canvas stays solid within this fraction of the radius */
  --fade-outer: 0.98; /* ... then dissolves to nothing by here */
  --tint-core: 0.1; /* quadrant colour: full within this fraction of the data-square half-side ... */
  --tint-edge: 0.7; /* ... then fades to nothing by here (smaller = fades sooner, darker edges) */
}

:root,
:root[data-theme="dark"] {
  --crosshair: rgba(255, 255, 255, 0.28);
  --composite: #e8ebf0;
  --quad-fill: 0.16; /* quadrant tint opacity on this ground */
}
:root[data-theme="light"] {
  --crosshair: rgba(0, 0, 0, 0.3);
  --composite: #16191f;
  --quad-fill: 0.1;
  --leading: #1f8f5c; /* deep green, darker for light-ground contrast */
  --weakening: #9a7628; /* muted ochre */
  --lagging: #b23a2e; /* deep red    */
  --improving: #2b7f88; /* muted teal  */
}