@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;
}
