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

/* Default brand colours; Admin → Content → Branding overrides these at runtime. */
:root { --brand-50: 238 246 255; --brand-500: 59 130 246; --brand-600: 29 78 216; --brand-700: 30 64 175; }

@layer components {
    .cms-body { @apply space-y-4 text-sm leading-relaxed text-slate-300; }
    .cms-body h1, .cms-body h2 { @apply mt-8 text-xl font-semibold text-white; }
    .cms-body h3 { @apply mt-6 text-lg font-semibold text-white; }
    .cms-body a { @apply text-brand-500 underline; }
    .cms-body strong { @apply text-white; }
    .cms-body ul { @apply list-disc space-y-1 pl-5; }
    .cms-body ol { @apply list-decimal space-y-1 pl-5; }
    .cms-body blockquote { @apply rounded-lg border border-amber-500/40 bg-amber-500/10 p-3 text-amber-200; }
    .cms-body table { @apply w-full text-left; }
    .cms-body th, .cms-body td { @apply border-b border-slate-800 px-3 py-2; }
    .cms-body code { @apply rounded bg-slate-800 px-1.5 py-0.5 text-xs; }
    .cms-body img { @apply max-w-full rounded-lg; }
    .card { @apply rounded-xl border border-slate-200 bg-white p-5 shadow-sm; }
    .card-title { @apply mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500; }
    .label { @apply mb-1 block text-sm font-medium text-slate-700; }
    .input { @apply block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500; }
    .btn { @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-50; }
    .btn-primary { @apply btn bg-brand-600 text-white hover:bg-brand-700; }
    .btn-secondary { @apply btn border border-slate-300 bg-white text-slate-700 hover:bg-slate-50; }
    .btn-danger { @apply btn bg-down text-white hover:bg-red-700; }
    .btn-success { @apply btn bg-up text-white hover:bg-green-700; }
    .btn-sm { @apply px-2.5 py-1 text-xs; }
    .tbl { @apply w-full text-left text-sm; }
    .tbl th { @apply border-b border-slate-200 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500; }
    .tbl td { @apply border-b border-slate-100 px-3 py-2 align-middle; }
    .badge { @apply inline-block rounded-full px-2 py-0.5 text-xs font-semibold; }
    .badge-green { @apply badge bg-green-100 text-green-800; }
    .badge-yellow { @apply badge bg-amber-100 text-amber-800; }
    .badge-red { @apply badge bg-red-100 text-red-800; }
    .badge-gray { @apply badge bg-slate-100 text-slate-700; }
    .err { @apply mt-1 text-sm text-down; }
    .pos { @apply text-up; }
    .neg { @apply text-down; }
}