:root {
  --site-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --site-font-mono: 'JetBrains Mono', monospace;
  --site-radius-sm: 8px;
  --site-radius: 12px;
  --site-radius-lg: 20px;
  --site-radius-full: 9999px;
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-site-theme="light"] {
  --site-bg: #F4F5F8;
  --site-bg-secondary: #EBEDF2;
  --site-surface: rgba(255, 255, 255, 0.85);
  --site-surface-solid: #ffffff;
  --site-surface-hover: rgba(255, 255, 255, 0.95);
  --site-text: #0F172A;
  --site-text-secondary: #475569;
  --site-text-muted: #94A3B8;
  --site-border: rgba(15, 23, 42, 0.08);
  --site-border-light: rgba(15, 23, 42, 0.04);
  --site-border-focus: rgba(99, 102, 241, 0.4);
  --site-accent: #6366F1;
  --site-accent-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  --site-accent-hover: #4F46E5;
  --site-accent-text: #ffffff;
  --site-danger: #EF4444;
  --site-success: #10B981;
  --site-warning: #F59E0B;
  --site-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  --site-shadow-lg: 0 20px 40px -8px rgba(15, 23, 42, 0.12);
  --site-shadow-floating: 0 20px 40px -10px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.6);
  --glass-backdrop: blur(16px) saturate(180%);
}

[data-site-theme="dark"] {
  --site-bg: #0B0F19;
  --site-bg-secondary: #111827;
  --site-surface: rgba(17, 24, 39, 0.82);
  --site-surface-solid: #1F2937;
  --site-surface-hover: rgba(31, 41, 55, 0.95);
  --site-text: #F8FAFC;
  --site-text-secondary: #CBD5E1;
  --site-text-muted: #64748B;
  --site-border: rgba(255, 255, 255, 0.1);
  --site-border-light: rgba(255, 255, 255, 0.05);
  --site-border-focus: rgba(129, 140, 248, 0.4);
  --site-accent: #818CF8;
  --site-accent-gradient: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);
  --site-accent-hover: #6366F1;
  --site-accent-text: #ffffff;
  --site-danger: #F87171;
  --site-success: #34D399;
  --site-warning: #FBBF24;
  --site-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --site-shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.6);
  --site-shadow-floating: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  --glass-backdrop: blur(16px) saturate(180%);
}

[data-diagram-theme="default"] {
  --diagram-node-fill: #ffffff;
  --diagram-node-stroke: #1E293B;
  --diagram-node-text: #0F172A;
  --diagram-decision-fill: #FDF2F8;
  --diagram-decision-stroke: #DB2777;
  --diagram-start-fill: #ECFDF5;
  --diagram-start-stroke: #059669;
  --diagram-process-fill: #EFF6FF;
  --diagram-process-stroke: #2563EB;
  --diagram-io-fill: #FEFCE8;
  --diagram-io-stroke: #CA8A04;
  --diagram-arrow-color: #334155;
  --diagram-arrow-width: 2px;
  --diagram-label-bg: #ffffff;
  --diagram-label-text: #0F172A;
  --diagram-selection-color: #6366F1;
  --diagram-anchor-color: #10B981;
  --diagram-guide-color: #6366F1;
  --diagram-guide-center-color: #F97316;
}

[data-site-theme="dark"] [data-diagram-theme="default"] {
  --diagram-node-fill: #1E293B;
  --diagram-node-stroke: #64748B;
  --diagram-node-text: #F8FAFC;
  --diagram-decision-fill: #311B28;
  --diagram-decision-stroke: #F472B6;
  --diagram-start-fill: #064E3B;
  --diagram-start-stroke: #34D399;
  --diagram-process-fill: #172554;
  --diagram-process-stroke: #60A5FA;
  --diagram-io-fill: #422006;
  --diagram-io-stroke: #FACC15;
  --diagram-arrow-color: #94A3B8;
  --diagram-label-bg: #1E293B;
  --diagram-label-text: #F8FAFC;
}

[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: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--site-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--site-text-muted);
}