:root {
  --site-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --site-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --site-radius: 6px;
  --site-radius-lg: 10px;
  --transition: 150ms ease;
}

[data-site-theme="light"] {
  --site-bg: #ffffff;
  --site-bg-secondary: #f1f5f9;
  --site-surface: #f8fafc;
  --site-surface-hover: #e2e8f0;
  --site-text: #1e293b;
  --site-text-secondary: #475569;
  --site-text-muted: #94a3b8;
  --site-border: #cbd5e1;
  --site-border-light: #e2e8f0;
  --site-accent: #2563eb;
  --site-accent-hover: #1d4ed8;
  --site-accent-text: #ffffff;
  --site-danger: #ef4444;
  --site-success: #22c55e;
  --site-warning: #f59e0b;
  --site-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --site-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-site-theme="dark"] {
  --site-bg: #0f1117;
  --site-bg-secondary: #161922;
  --site-surface: #1a1d27;
  --site-surface-hover: #232734;
  --site-text: #e2e8f0;
  --site-text-secondary: #94a3b8;
  --site-text-muted: #64748b;
  --site-border: #334155;
  --site-border-light: #1e293b;
  --site-accent: #3b82f6;
  --site-accent-hover: #60a5fa;
  --site-accent-text: #ffffff;
  --site-danger: #f87171;
  --site-success: #4ade80;
  --site-warning: #fbbf24;
  --site-shadow: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
  --site-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -2px rgba(0,0,0,0.4);
}

[data-diagram-theme="default"] {
  --diagram-node-fill: #ffffff;
  --diagram-node-stroke: #1e293b;
  --diagram-node-text: #1e293b;
  --diagram-decision-fill: #fdf2f8;
  --diagram-decision-stroke: #db2777;
  --diagram-start-fill: #f0fdf4;
  --diagram-start-stroke: #16a34a;
  --diagram-process-fill: #eff6ff;
  --diagram-process-stroke: #2563eb;
  --diagram-io-fill: #fefce8;
  --diagram-io-stroke: #ca8a04;
  --diagram-arrow-color: #1e293b;
  --diagram-arrow-width: 2px;
  --diagram-label-bg: #ffffff;
  --diagram-label-text: #1e293b;
  --diagram-selection-color: #2563eb;
  --diagram-anchor-color: #22c55e;
  --diagram-guide-color: #3b82f6;
  --diagram-guide-center-color: #f97316;
}

[data-diagram-theme="pastel"] {
  --diagram-node-fill: #fdfbf7;
  --diagram-node-stroke: #a8a29e;
  --diagram-node-text: #57534e;
  --diagram-decision-fill: #fce7f3;
  --diagram-decision-stroke: #f472b6;
  --diagram-start-fill: #dcfce7;
  --diagram-start-stroke: #4ade80;
  --diagram-process-fill: #e0e7ff;
  --diagram-process-stroke: #818cf8;
  --diagram-io-fill: #fef08a;
  --diagram-io-stroke: #facc15;
  --diagram-arrow-color: #a8a29e;
  --diagram-arrow-width: 2px;
  --diagram-label-bg: #fdfbf7;
  --diagram-label-text: #57534e;
  --diagram-selection-color: #818cf8;
  --diagram-anchor-color: #4ade80;
  --diagram-guide-color: #a78bfa;
  --diagram-guide-center-color: #fb923c;
}

[data-diagram-theme="monochrome"] {
  --diagram-node-fill: #ffffff;
  --diagram-node-stroke: #000000;
  --diagram-node-text: #000000;
  --diagram-decision-fill: #ffffff;
  --diagram-decision-stroke: #000000;
  --diagram-start-fill: #ffffff;
  --diagram-start-stroke: #000000;
  --diagram-process-fill: #ffffff;
  --diagram-process-stroke: #000000;
  --diagram-io-fill: #ffffff;
  --diagram-io-stroke: #000000;
  --diagram-arrow-color: #000000;
  --diagram-arrow-width: 2px;
  --diagram-label-bg: #ffffff;
  --diagram-label-text: #000000;
  --diagram-selection-color: #555555;
  --diagram-anchor-color: #888888;
  --diagram-guide-color: #aaaaaa;
  --diagram-guide-center-color: #cccccc;
}

[data-diagram-theme="blueprint"] {
  --diagram-node-fill: transparent;
  --diagram-node-stroke: #ffffff;
  --diagram-node-text: #ffffff;
  --diagram-decision-fill: transparent;
  --diagram-decision-stroke: #ffffff;
  --diagram-start-fill: transparent;
  --diagram-start-stroke: #ffffff;
  --diagram-process-fill: transparent;
  --diagram-process-stroke: #ffffff;
  --diagram-io-fill: transparent;
  --diagram-io-stroke: #ffffff;
  --diagram-arrow-color: #ffffff;
  --diagram-arrow-width: 2px;
  --diagram-label-bg: #1e3a8a;
  --diagram-label-text: #ffffff;
  --diagram-selection-color: #fde047;
  --diagram-anchor-color: #38bdf8;
  --diagram-guide-color: #fde047;
  --diagram-guide-center-color: #f87171;
}
[data-diagram-theme="blueprint"] #grid-bg {
  fill: #1e3a8a !important;
}

[data-diagram-theme="vibrant"] {
  --diagram-node-fill: #ffffff;
  --diagram-node-stroke: #8b5cf6;
  --diagram-node-text: #4c1d95;
  --diagram-decision-fill: #fdf4ff;
  --diagram-decision-stroke: #d946ef;
  --diagram-start-fill: #f0fdf4;
  --diagram-start-stroke: #22c55e;
  --diagram-process-fill: #ecfeff;
  --diagram-process-stroke: #06b6d4;
  --diagram-io-fill: #fff7ed;
  --diagram-io-stroke: #f97316;
  --diagram-arrow-color: #8b5cf6;
  --diagram-arrow-width: 3px;
  --diagram-label-bg: #ffffff;
  --diagram-label-text: #4c1d95;
  --diagram-selection-color: #ec4899;
  --diagram-anchor-color: #14b8a6;
  --diagram-guide-color: #ec4899;
  --diagram-guide-center-color: #eab308;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--site-font);
  font-size: 13px;
  color: var(--site-text);
  background-color: var(--site-bg);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--site-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--site-text-muted);
}