/* SecFusionAgent diagram theme v2: neutral enterprise canvas with semantic accents. */
:root {
  --domain-accent:#2563eb;
  --domain-accent-2:#3b82f6;
  --domain-accent-3:#60a5fa;
}

html[data-theme="light"] {
  --bg:#f8fafc;
  --grid:#e8eef6;
  --text:#0f172a;
  --text-muted:#64748b;
  --text-dim:#94a3b8;
  --text-faint:#7c8da3;
  --panel:#ffffff;
  --panel-border:#dbe3ee;
  --lane-fill:rgba(241,245,249,.72);
  --lane-stroke:#d7e0ea;
  --mask:#ffffff;

  --frontend-fill:#eff6ff;
  --frontend-stroke:#3b82f6;
  --backend-fill:#f8fafc;
  --backend-stroke:#64748b;
  --database-fill:#eef2ff;
  --database-stroke:#6366f1;
  --cloud-fill:#fffbeb;
  --cloud-stroke:#d97706;
  --security-fill:#fef2f2;
  --security-stroke:#dc2626;
  --messagebus-fill:#ecfeff;
  --messagebus-stroke:#0891b2;
  --external-fill:#f1f5f9;
  --external-stroke:#94a3b8;

  --arrow:#94a3b8;
  --arrow-emphasis:#2563eb;
  --toolbar-bg:rgba(255,255,255,.95);
  --toolbar-border:#dbe3ee;
  --toolbar-text:#334155;
  --toolbar-hover:#f8fafc;
  --toolbar-menu-bg:#ffffff;
}

html[data-theme="dark"] {
  --bg:#0f172a;
  --grid:#1e293b;
  --text:#f8fafc;
  --text-muted:#94a3b8;
  --text-dim:#64748b;
  --text-faint:#8090a5;
  --panel:#111c2f;
  --panel-border:#26364c;
  --lane-fill:rgba(30,41,59,.58);
  --lane-stroke:#334155;
  --mask:#0f172a;

  --frontend-fill:rgba(59,130,246,.12);
  --frontend-stroke:#60a5fa;
  --backend-fill:rgba(148,163,184,.07);
  --backend-stroke:#94a3b8;
  --database-fill:rgba(99,102,241,.12);
  --database-stroke:#818cf8;
  --cloud-fill:rgba(217,119,6,.10);
  --cloud-stroke:#f59e0b;
  --security-fill:rgba(220,38,38,.10);
  --security-stroke:#f87171;
  --messagebus-fill:rgba(8,145,178,.10);
  --messagebus-stroke:#22d3ee;
  --external-fill:rgba(148,163,184,.07);
  --external-stroke:#94a3b8;

  --arrow:#64748b;
  --arrow-emphasis:#60a5fa;
  --toolbar-bg:rgba(15,23,42,.95);
  --toolbar-border:#26364c;
  --toolbar-text:#e2e8f0;
  --toolbar-hover:#172033;
  --toolbar-menu-bg:#111c2f;
}

/* Archify presets define their own token blocks with higher selector specificity.
   Keep their geometry/interaction, but normalize the visual system here. */
html[data-preset="editorial"][data-theme="light"],
html[data-preset="blueprint"][data-theme="light"],
html[data-preset="signal-flow"][data-theme="light"] {
  --bg:#f8fafc;
  --grid:#e8eef6;
  --text:#0f172a;
  --text-muted:#64748b;
  --text-dim:#94a3b8;
  --text-faint:#7c8da3;
  --panel:#ffffff;
  --panel-border:#dbe3ee;
  --lane-fill:rgba(241,245,249,.72);
  --lane-stroke:#d7e0ea;
  --mask:#ffffff;
  --frontend-fill:#eff6ff;
  --frontend-stroke:#3b82f6;
  --backend-fill:#f8fafc;
  --backend-stroke:#64748b;
  --database-fill:#eef2ff;
  --database-stroke:#6366f1;
  --cloud-fill:#fffbeb;
  --cloud-stroke:#d97706;
  --security-fill:#fef2f2;
  --security-stroke:#dc2626;
  --messagebus-fill:#ecfeff;
  --messagebus-stroke:#0891b2;
  --external-fill:#f1f5f9;
  --external-stroke:#94a3b8;
  --arrow:#94a3b8;
  --arrow-emphasis:#2563eb;
  --toolbar-bg:rgba(255,255,255,.95);
  --toolbar-border:#dbe3ee;
  --toolbar-text:#334155;
  --toolbar-hover:#f8fafc;
  --toolbar-menu-bg:#ffffff;
}

html[data-preset="editorial"][data-theme="dark"],
html[data-preset="blueprint"][data-theme="dark"],
html[data-preset="signal-flow"][data-theme="dark"] {
  --bg:#0f172a;
  --grid:#1e293b;
  --text:#f8fafc;
  --text-muted:#94a3b8;
  --text-dim:#64748b;
  --text-faint:#8090a5;
  --panel:#111c2f;
  --panel-border:#26364c;
  --lane-fill:rgba(30,41,59,.58);
  --lane-stroke:#334155;
  --mask:#0f172a;
  --frontend-fill:rgba(59,130,246,.12);
  --frontend-stroke:#60a5fa;
  --backend-fill:rgba(148,163,184,.07);
  --backend-stroke:#94a3b8;
  --database-fill:rgba(99,102,241,.12);
  --database-stroke:#818cf8;
  --cloud-fill:rgba(217,119,6,.10);
  --cloud-stroke:#f59e0b;
  --security-fill:rgba(220,38,38,.10);
  --security-stroke:#f87171;
  --messagebus-fill:rgba(8,145,178,.10);
  --messagebus-stroke:#22d3ee;
  --external-fill:rgba(148,163,184,.07);
  --external-stroke:#94a3b8;
  --arrow:#64748b;
  --arrow-emphasis:#60a5fa;
  --toolbar-bg:rgba(15,23,42,.95);
  --toolbar-border:#26364c;
  --toolbar-text:#e2e8f0;
  --toolbar-hover:#172033;
  --toolbar-menu-bg:#111c2f;
}

html[data-preset="signal-flow"] body,
html[data-preset="editorial"] body,
html[data-preset="blueprint"] body {
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  background-position:-1px -1px;
  background-attachment:fixed;
}

.toolbar button,
.diagram-container,
.guided-views { box-shadow:none !important; }

.pulse-dot {
  background:#2563eb !important;
  box-shadow:0 0 0 5px rgba(37,99,235,.10) !important;
}
.header-row h1::before { color:#2563eb !important; }