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

@layer base {
  :root {
    --surface: 248 250 252;
    --surface-raised: 255 255 255;
    --surface-overlay: 241 245 249;
    --accent: 6 182 212;
    --accent-muted: 8 145 178;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --surface: 15 20 25;
      --surface-raised: 21 28 36;
      --surface-overlay: 26 35 46;
      --accent: 34 211 238;
      --accent-muted: 6 182 212;
    }
  }
}

@layer components {
  .btn-primary {
    @apply rounded-lg bg-accent px-4 py-2 text-sm font-medium text-slate-950 transition hover:opacity-90 disabled:opacity-50;
  }
  .btn-secondary {
    @apply rounded-lg border border-slate-300 bg-surface-raised px-4 py-2 text-sm font-medium transition hover:bg-surface-overlay dark:border-slate-700;
  }
  .input-field {
    @apply w-full rounded-lg border border-slate-300 bg-surface-overlay px-3 py-2 text-sm outline-none ring-accent focus:border-accent focus:ring-1 dark:border-slate-700;
  }
  .card {
    @apply rounded-xl border border-slate-200 bg-surface-raised p-4 shadow-sm dark:border-slate-800;
  }
}