/* tokens.css — THE portfolio design-token sheet (v1, 12/07/2026).
   One visual vocabulary for every harness surface: import this, use the variables, never invent
   colours inline. Distilled from the surfaces we already like (the dark "cocoon" grammar of
   fable5/diagram-layers.html + the Mini App board) with spacing/type judgment borrowed from the
   established design systems — steal the taste, skip the toolchain (decisions.md → "Rich
   decision-surfaces" addendum). Served by miniapp-server at /tokens.css. */
:root {
  /* surfaces — dark cocoon */
  --bg:      #05070d;   /* page */
  --panel:   #0a0e1a;   /* chart / canvas areas */
  --card:    #0e1526;   /* cards, buttons */
  --line:    #232b38;   /* borders, gridlines */
  --line-soft: rgba(255,255,255,.08);

  /* text */
  --tx:      #e2e8f0;   /* primary */
  --hint:    #94a3b8;   /* secondary */
  --faint:   #475569;   /* tertiary / axes */

  /* accents */
  --accent:  #3390ec;   /* interactive / links / primary action */
  --pink:    #f472b6;   /* platform / highlight (the cocoon accent) */
  --warn:    #e6a23c;   /* caution */

  /* semantic chart bands (senders say cheap/normal/peak — the palette lives HERE only) */
  --band-cheap:  #3ad07a;
  --band-normal: #64748b;
  --band-peak:   #ef4444;
  --band-window: rgba(51,144,236,.16);   /* bracketed action window fill */
  --band-peak-fill: rgba(239,68,68,.12); /* peak region fill */

  /* spacing scale (px) */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 24px;

  /* radii */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;

  /* type */
  --f-sm: 12px;  --f-md: 14px;  --f-lg: 16px;  --f-xl: 20px;
  --font-ui: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, monospace;
}