@import "tailwindcss";

@theme {
  --color-brand-50: #e6f4f3;
  --color-brand-100: #cce9e7;
  --color-brand-200: #99d3cf;
  --color-brand-500: #0d6b63;
  --color-brand-600: #08504f;
  --color-brand-700: #064e4a;
  --color-brand-800: #053d3a;
  --color-brand-900: #0a4a44;

  --color-action: #2563eb;
  --color-action-hover: #1d4ed8;
  --color-purple-action: #7c3aed;
  --color-purple-action-hover: #6d28d9;

  --color-surface: #f8fafc;
  --color-surface-muted: #f0f4f8;
  --color-info-bg: #eff6ff;
  --color-info-text: #1e40af;

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --radius-card: 12px;
  --radius-input: 8px;
  --radius-button: 8px;
  --radius-pill: 9999px;

  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}

@layer base {
  body {
    @apply bg-surface font-sans text-gray-900 antialiased;
  }
}