@import "tailwindcss";

@theme {
  --color-background: hsl(36 33% 97%);
  --color-foreground: hsl(222 33% 15%);
  --color-card: hsl(0 0% 100%);
  --color-line: hsl(32 18% 84%);
  --color-line-strong: hsl(32 18% 76%);
  --color-primary: hsl(198 78% 37%);
  --color-primary-soft: hsl(198 52% 90%);
  --color-muted: hsl(220 13% 40%);
  --color-success: hsl(142 60% 45%);
  --color-success-soft: hsl(142 60% 90%);
  --color-warning: hsl(45 93% 47%);
  --color-warning-soft: hsl(45 93% 90%);
  --color-error: hsl(2 72% 48%);
  --color-error-soft: hsl(2 72% 90%);
  
  --font-sans: "Avenir Next", "Segoe UI", "Noto Sans", system-ui, sans-serif;
  
  --shadow-soft: 0 1px 2px 0 rgb(23 32 46 / 0.06);
  --shadow-card: 0 12px 30px -12px rgb(23 32 46 / 0.22);
}

.dark {
  --color-background: hsl(222 35% 10%);
  --color-foreground: hsl(38 20% 92%);
  --color-card: hsl(221 31% 13%);
  --color-line: hsl(219 18% 25%);
  --color-line-strong: hsl(219 18% 33%);
  --color-primary: hsl(194 76% 62%);
  --color-primary-soft: hsl(210 34% 24%);
  --color-muted: hsl(218 17% 72%);
}

/* Base styles */
* {
  border-color: var(--color-line);
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-line);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-line-strong);
}

/* Selection */
::selection {
  background: hsl(198 78% 37% / 0.2);
  color: var(--color-foreground);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

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

/* Custom utilities - use directly in components */
.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

/* Dark mode overrides */
.dark {
  --shadow-soft: 0 1px 2px 0 rgb(2 8 18 / 0.35);
  --shadow-card: 0 12px 30px -12px rgb(2 8 18 / 0.55);
}