@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Светлая тема (по умолчанию) ──────────────────────────────────────────── */
:root {
  --bg: 250 250 249;          /* stone-50 — мягкий тёплый фон */
  --surface: 255 255 255;     /* белые карточки */
  --surface2: 245 245 244;    /* stone-100 — инпуты */
  --border: 231 229 228;      /* stone-200 */
  --text: 23 23 23;           /* neutral-900 */
  --text-soft: 82 82 91;      /* zinc-600 */
  --text-mute: 161 161 170;   /* zinc-400 */
  --accent: 99 102 241;       /* indigo-500 */
  --accent2: 79 70 229;       /* indigo-600 */
  --accent-text: 255 255 255; /* белый текст на акценте */
}

/* ── Тёмная тема ──────────────────────────────────────────────────────────── */
:root[data-theme='dark'] {
  --bg: 10 10 10;
  --surface: 20 20 20;
  --surface2: 28 28 28;
  --border: 42 42 42;
  --text: 243 244 246;        /* gray-100 */
  --text-soft: 209 213 219;   /* gray-300 */
  --text-mute: 107 114 128;   /* gray-500 */
  --accent: 129 140 248;
  --accent2: 165 180 252;
  --accent-text: 0 0 0;
}

@layer base {
  html { @apply bg-bg text-text; }
  body { @apply font-sans antialiased; }
  ::selection { background: rgb(var(--accent) / 0.3); }
}

@layer components {
  .btn { @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed; }
  .btn-primary { @apply btn; background: rgb(var(--accent)); color: rgb(var(--accent-text)); }
  .btn-primary:hover:not(:disabled) { background: rgb(var(--accent2)); }
  .btn-ghost { @apply btn; color: rgb(var(--text-soft)); }
  .btn-ghost:hover:not(:disabled) { background: rgb(var(--surface2)); color: rgb(var(--text)); }
  .btn-danger { @apply btn; background: rgb(220 38 38 / 0.1); color: rgb(248 113 113); }
  .btn-danger:hover:not(:disabled) { background: rgb(220 38 38 / 0.2); }
  .card { @apply rounded-xl; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); }
  .input {
    @apply w-full rounded-lg px-3 py-2 focus:outline-none transition-colors;
    background: rgb(var(--surface2));
    border: 1px solid rgb(var(--border));
    color: rgb(var(--text));
  }
  .input::placeholder { color: rgb(var(--text-mute)); }
  .input:focus { border-color: rgb(var(--accent)); }
  .label { @apply block text-sm font-medium mb-1.5; color: rgb(var(--text-soft)); }
  .hint { @apply text-xs mt-1; color: rgb(var(--text-mute)); }
}

/* ── Theme switch animation ──────────────────────────────────────────────── */
* {
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}