/* ============================================================
   diagram-tokens.css — ONE source of truth for the threat-model
   diagram style, shared by the detail map (page 4) and the
   standard view (page 3).

   - The standard view consumes these via var() in its CSS.
   - The detail map's SVG engine reads them once at init via
     getComputedStyle (palette, group + edge colours, node radius)
     and uses var() in CSS for the arrowhead markers + selection.

   NB on scope (see also the per-diagram values that stay local):
   font-SIZE and node text padding are NOT tokenised — they feed the
   detail map's auto-fit box layout and the standard view's
   hand-authored box heights, so they're scale-coupled per diagram.
   Everything here is scale-independent: colours, radius, borders,
   dash, arrowheads, group style, font family/weight, label tracking.
   ============================================================ */
:root {
  /* ── Node palette, by type (mirrors the detail map's COLORS) ── */
  --diag-action-fill:   #FFFFFF;  --diag-action-border:  rgba(170,170,170,0.3);  --diag-action-text:  #555555;  /* AI scheming action — white interactive card; faint border matches VS/Standard (rgba 170 .3) */
  --diag-state-fill:    #F0EDFB;  --diag-state-border:   #B7AAE0;  --diag-state-text:   #4a3a87;  /* world / intermediate state */
  --diag-key-fill:      #E0F9FF;  --diag-key-border:     #17B8CF;  --diag-key-text:     #0a5060;  /* key scenario / start-end */
  --diag-outcome-fill:  #ECF9F7;  --diag-outcome-border: #17CFB9;  --diag-outcome-text: #0a7d6c;  /* world-state outcome */
  --diag-blue-fill:     #EEF4FC;  --diag-blue-border:    #7BA8D8;  --diag-blue-text:    #1a3a6e;  /* intermediate outcome */
  --diag-tan-fill:      #FDFAF8;  --diag-tan-border:     #D0C0B0;  --diag-tan-text:     #4A3025;  /* connector / sub-heading */
  --diag-gate-fill:     #FFF0F0;  --diag-gate-border:    #cc3333;  --diag-gate-text:    #cc3333;  /* AND gate */

  /* ── Edges + arrowheads ── */
  /* Arrowhead = same ink as the line it caps (was a lighter #BBBBBB, which read
     as a two-tone edge). Both the detail map and standard view source this token. */
  --diag-edge:                #AAAAAA;   --diag-edge-arrow:          #AAAAAA;
  --diag-edge-required:       #cc3333;   --diag-edge-required-arrow: #cc3333;

  /* ── Group (section) boxes ── */
  --diag-group-stroke: #C2C2C2;
  --diag-group-fill:   rgba(252,252,252,0.82);   /* stronger fill so edges underneath read faint */
  --diag-group-dash:   6 4;            /* SVG stroke-dasharray (detail map) */
  --diag-label-bg:     var(--diag-group-fill);    /* section-label strip = the section fill, so the label reads as part of the box (white in light) while still masking the dashed line behind it */

  /* ── Shared geometry + type ── */
  --diag-node-radius:    8px;
  --diag-node-border:    1.5px;
  --diag-group-radius:   8px;
  --diag-selection:      #1a1a1a;       /* selected node/box 2px ring */
  --diag-font:           "PP", -apple-system, sans-serif;
  --diag-node-weight:    500;
  --diag-label-weight:   700;
  --diag-label-tracking: 0.22em;        /* em-based → same proportion at any scale */
  --diag-label-color:    #555;

  /* Node text size + padding. Now shared: the standard view is laid out at the
     detail map's scale (boxes auto-fit to this 18px text). The detail map uses
     matching literals in JS (font-size feeds its auto-fit + DEFAULT_BOUNDS, so
     it reads them locally rather than via this token). */
  --diag-node-font-size: 18px;
  --diag-node-pad:       12px 16px;     /* = detail's 12px vertical / 16px horizontal inset */
  --diag-label-font-size: 18px;         /* section labels = node text size (matches the detail map) */
}