/* Synthology.Shared.Web — synth-dataflow.css (RI-2026-138 Phase 1) * * Theme-aware styling for the shared Visual Dataflow renderer * (synth-dataflow.js). The diagram is hosted inside a per-product IFRAME * (e.g. SynthIQ /dataflow.html) which does NOT inherit the parent shell's * light/dark class — so this stylesheet adapts via prefers-color-scheme on * its own, defaulting to the dark surface the admin iframes use. * * The node palette is the SHARED semantic set (gray/teal/blue/green/amber/ * red/indigo); a product's brand accent for "process" nodes arrives at * runtime as the --df-accent CSS variable set on the SVG root. * * Non-device per FD&C Act 520(o)(1)(D). */ :root { --df-bg: #0f1117; --df-fg: #e2e8f0; --df-muted: #94a3b8; --df-edge: #64748b; --df-edge-active: #94a3b8; --df-card: #161a28; --df-border: #2d3148; /* semantic node ramps: fill / stroke / text */ --df-gray-f: #1e2333; --df-gray-s: #3a4155; --df-gray-t: #cbd5e1; --df-teal-f: rgba(20,184,166,.16); --df-teal-s: #2dd4bf; --df-teal-t: #99f6e4; --df-blue-f: rgba(59,130,246,.18); --df-blue-s: #60a5fa; --df-blue-t: #bfdbfe; --df-green-f: rgba(34,197,94,.16); --df-green-s: #4ade80; --df-green-t: #bbf7d0; --df-amber-f: rgba(234,179,8,.16); --df-amber-s: #facc15; --df-amber-t: #fde68a; --df-red-f: rgba(239,68,68,.16); --df-red-s: #f87171; --df-red-t: #fecaca; --df-indigo-f: rgba(99,102,241,.18);--df-indigo-s: #818cf8;--df-indigo-t: #c7d2fe; /* status dots */ --df-ok: #22c55e; --df-warn: #eab308; --df-down: #ef4444; --df-idle: #64748b; /* focus highlight ring (RI-2026-138 deep-link focus) */ --df-focus-ring: #f59e0b; } @media (prefers-color-scheme: light) { :root { --df-bg: #f8fafc; --df-fg: #0f172a; --df-muted: #64748b; --df-edge: #94a3b8; --df-edge-active: #475569; --df-card: #ffffff; --df-border: #e2e8f0; --df-gray-f: #f1f5f9; --df-gray-s: #cbd5e1; --df-gray-t: #0f172a; --df-teal-f: #ccfbf1; --df-teal-s: #14b8a6; --df-teal-t: #134e4a; --df-blue-f: #dbeafe; --df-blue-s: #3b82f6; --df-blue-t: #1e3a8a; --df-green-f: #dcfce7; --df-green-s: #22c55e; --df-green-t: #14532d; --df-amber-f: #fef9c3; --df-amber-s: #eab308; --df-amber-t: #713f12; --df-red-f: #fee2e2; --df-red-s: #ef4444; --df-red-t: #7f1d1d; --df-indigo-f: #e0e7ff; --df-indigo-s: #6366f1; --df-indigo-t: #312e81; --df-focus-ring: #d97706; } } /* ── App-theme override (RI-2026-305) ─────────────────────────────────────── These pages render inside a same-origin