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

:root {
  --brand-primary: #2563eb;
  --brand-primary-dark: #1d4ed8;
  --brand-accent: #10b981;
  --brand-accent-dark: #059669;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-dark: #0f172a;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;
}

@layer base {
  body {
    @apply bg-white text-slate-900 antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-lg bg-brand-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-brand-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-lg bg-white px-6 py-3 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 transition-all hover:bg-slate-50;
  }

  .btn-accent {
    @apply inline-flex items-center justify-center rounded-lg bg-accent px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-accent-dark;
  }

  .card {
    @apply rounded-2xl bg-white p-8 shadow-lg ring-1 ring-slate-200;
  }

  .section {
    @apply mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8;
  }

  .input-field {
    @apply block w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 shadow-sm transition-all focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20;
  }
}