@import "tailwindcss";

/* Garwin AI design tokens: grayscale surfaces, blue actions, orange accents. */
@theme {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;

  --color-accent-50: #fff7ed;
  --color-accent-100: #ffedd5;
  --color-accent-500: #f97316;
  --color-accent-600: #ea580c;
}

html,
body {
  height: 100%;
}

body {
  @apply bg-neutral-100 text-neutral-900 antialiased;
}

@utility btn {
  @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600;
}

@layer components {
  .btn-primary {
    @apply btn bg-brand-600 text-white hover:bg-brand-700;
  }
  .btn-secondary {
    @apply btn border border-neutral-300 bg-white text-neutral-800 hover:bg-neutral-50;
  }
  .btn-danger {
    @apply btn border border-red-200 bg-white text-red-700 hover:bg-red-50;
  }
  .input {
    @apply block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100;
  }
  .label {
    @apply mb-1 block text-sm font-medium text-neutral-700;
  }
  .card {
    @apply rounded-xl border border-neutral-200 bg-white;
  }
}