@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@layer base {
:root {
--color-primary: #4a9eff;
--color-on-primary: #ffffff;
--color-primary-container: #2170e4;
--color-on-primary-container: #fefcff;
--color-secondary: #505f76;
--color-on-secondary: #ffffff;
--color-secondary-container: #d0e1fb;
--color-tertiary: #924700;
--color-on-tertiary: #ffffff;
--color-tertiary-container: #b75b00;
--color-error: #ba1a1a;
--color-on-error: #ffffff;
--color-error-container: #ffdad6;
--color-surface: #f9f9ff;
--color-surface-dim: #d8d9e3;
--color-surface-bright: #f9f9ff;
--color-surface-container-lowest: #ffffff;
--color-surface-container-low: #f2f3fd;
--color-surface-container: #ecedf7;
--color-surface-container-high: #e6e7f2;
--color-surface-container-highest: #e1e2ec;
--color-on-surface: #191b23;
--color-on-surface-variant: #424754;
--color-outline: #727785;
--color-outline-variant: #c2c6d6;
--color-inverse-surface: #2e3038;
--color-inverse-on-surface: #eff0fa;
--color-inverse-primary: #adc6ff;
--color-background: #f9f9ff;
--color-on-background: #191b23;
--color-pattern: #4caf50;
--color-refactoring: #2196f3;
--color-law: #ff9800;
--color-smell: #f44336;
--color-insight: #ab47bc;
--color-rel-solves: #66bb6a;
--color-rel-solved-by: #81c784;
--color-rel-enforces: #42a5f5;
--color-rel-enforced-by: #64b5f6;
--color-rel-violates: #ef5350;
--color-rel-violated-by: #e57373;
--color-rel-related-to: #78909c;
--color-rel-derives-from: #9575cd;
--color-rel-applies-to: #4db6ac;
--color-rel-supersedes: #ff8a65;
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(114, 119, 133, 0.15);
}
:root.dark {
--color-primary: #adc6ff;
--color-on-primary: #002e6a;
--color-primary-container: #4d8eff;
--color-on-primary-container: #00285d;
--color-secondary: #4cd7f6;
--color-on-secondary: #003640;
--color-secondary-container: #03b5d3;
--color-tertiary: #c0c1ff;
--color-on-tertiary: #1000a9;
--color-tertiary-container: #8083ff;
--color-error: #ffb4ab;
--color-on-error: #690005;
--color-error-container: #93000a;
--color-surface: #10131a;
--color-surface-dim: #10131a;
--color-surface-bright: #363941;
--color-surface-container-lowest: #0b0e15;
--color-surface-container-low: #191b23;
--color-surface-container: #1d2027;
--color-surface-container-high: #272a31;
--color-surface-container-highest: #32353c;
--color-on-surface: #e1e2ec;
--color-on-surface-variant: #c2c6d6;
--color-outline: #8c909f;
--color-outline-variant: #424754;
--color-inverse-surface: #e1e2ec;
--color-inverse-on-surface: #2e3038;
--color-inverse-primary: #005ac2;
--color-background: #10131a;
--color-on-background: #e1e2ec;
--glass-bg: rgba(22, 27, 34, 0.7);
--glass-border: rgba(140, 144, 159, 0.2);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: var(--color-background);
color: var(--color-on-surface);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
}
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 12px;
}
@keyframes node-pulse {
0% { box-shadow: 0 0 0 0 var(--color-primary); opacity: 1; }
70% { box-shadow: 0 0 0 10px transparent; opacity: 0.7; }
100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}
.node-pulse {
animation: node-pulse 2s infinite;
}
@theme {
--font-display: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-code: 'JetBrains Mono', monospace;
}