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

  /* Light mode overrides */
  --color-light-surface-darkest: #F8FAFC;
  --color-light-surface-dark: #F1F5F9;
  --color-light-surface-medium: #E2E8F0;
  --color-light-surface-light: #CBD5E1;
  --color-light-surface-lighter: #94A3B8;
  --color-light-on-surface: #0F172A;
  --color-light-on-surface-variant: #475569;
  --color-light-on-surface-muted: #64748B;
  --color-light-primary: #0284C7;
}

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

/* Dark theme (default) */
html.dark body {
  background-color: var(--color-surface-darkest);
  color: var(--color-on-surface);
}

/* Light theme */
html.light body {
  background-color: var(--color-light-surface-darkest);
  color: var(--color-light-on-surface);
}

html.light {
  --color-surface-darkest: var(--color-light-surface-darkest);
  --color-surface-dark: var(--color-light-surface-dark);
  --color-surface-medium: var(--color-light-surface-medium);
  --color-surface-light: var(--color-light-surface-light);
  --color-surface-lighter: var(--color-light-surface-lighter);
  --color-on-surface: var(--color-light-on-surface);
  --color-on-surface-variant: var(--color-light-on-surface-variant);
  --color-on-surface-muted: var(--color-light-on-surface-muted);
  --color-primary: var(--color-light-primary);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-surface-light) 25%, var(--color-surface-lighter) 50%, var(--color-surface-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.5rem;
}