@import "tailwindcss";

@theme {
  --color-surface-darkest: #0D0F12;
  --color-surface-dark: #13161A;
  --color-surface-medium: #1C2027;
  --color-surface-light: #252B33;
  --color-surface-lighter: #2D3748;
  --color-on-surface: #E2E8F0;
  --color-on-surface-variant: #8A9BB0;
  --color-on-surface-muted: #64748B;
  --color-primary: #38BDF8;
  --color-secondary: #2DD4BF;
  --color-accent: #A78BFA;
  --color-danger: #F87171;
  --color-status-active: #38BDF8;
  --color-status-idle: #2DD4BF;
  --color-status-thinking: #A78BFA;
  --color-status-error: #F87171;
  --color-status-offline: #64748B;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-surface-darkest);
  color: var(--color-on-surface);
  font-family: 'Inter', 'Roboto', sans-serif;
}