:root {
  --infra-panel: #f8fafc;
  --infra-panel-glow: #eef2ff;
  --infra-border: #cbd5e1;
  --infra-zone: #ffffff;
  --infra-text: #1e293b;
  --infra-line: #64748b;
  --infra-client-fill: #f1f5f9;
  --infra-client-stroke: #94a3b8;
  --infra-edge-fill: #eef2ff;
  --infra-edge-stroke: #818cf8;
  --infra-service-fill: #ecfdf5;
  --infra-service-stroke: #34d399;
  --infra-cloud-fill: #fff7ed;
  --infra-cloud-stroke: #fb923c;
  --infra-storage-fill: #eff6ff;
  --infra-storage-stroke: #60a5fa;
}

[data-md-color-scheme="slate"] {
  --infra-panel: #141b2b;
  --infra-panel-glow: #202944;
  --infra-border: #475569;
  --infra-zone: #1e293b;
  --infra-text: #e2e8f0;
  --infra-line: #94a3b8;
  --infra-client-fill: #293548;
  --infra-client-stroke: #94a3b8;
  --infra-edge-fill: #30335c;
  --infra-edge-stroke: #a5b4fc;
  --infra-service-fill: #153c35;
  --infra-service-stroke: #6ee7b7;
  --infra-cloud-fill: #493324;
  --infra-cloud-stroke: #fdba74;
  --infra-storage-fill: #203654;
  --infra-storage-stroke: #93c5fd;
}

.md-typeset .mermaid {
  --md-mermaid-label-fg-color: var(--infra-text);
  --md-mermaid-label-bg-color: var(--infra-zone);
  margin: 1.25rem 0;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--infra-border);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--infra-panel), var(--infra-panel-glow));
}