@import "tailwindcss";

@theme {
  --color-bg-page: #0a0a0a;
  --color-bg-card: #141414;
  --color-bg-elevated: #1a1a1a;
  --color-border-subtle: #2a2a2a;
  --color-border-hover: #3a3a3a;
  --color-text-primary: #f0f0f0;
  --color-text-body: #888888;
  --color-text-muted: #555555;
  --color-accent: #4a9eff;
  --color-status-working: #4ade80;
  --color-status-idle: #6b7280;
  --color-status-error: #f87171;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip to content link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent);
  color: var(--color-bg-page);
  padding: 8px 16px;
  z-index: 100;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}
