@import "tailwindcss";
@import "@__TRESTLE_PROJECT_NAME__/theme";

@theme inline {
  --color-background: var(--trestle-background);
  --color-surface: var(--trestle-surface);
  --color-foreground: var(--trestle-foreground);
  --color-muted: var(--trestle-muted);
  --color-primary: var(--trestle-primary);
  --color-primary-strong: var(--trestle-primary-strong);
  --color-destructive: var(--trestle-destructive);
  --color-border: var(--trestle-border);
  --color-focus: var(--trestle-focus);
  --color-brand-500: var(--trestle-primary);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
}

:root {
  color: var(--trestle-foreground);
  background: var(--trestle-background);
  font-family: var(--font-sans);
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at top, white 0, var(--trestle-background) 48rem);
}

.card {
  @apply rounded-3xl border border-slate-200 bg-white shadow-sm;
}

.eyebrow {
  @apply text-sm font-semibold uppercase tracking-[0.2em] text-brand-500;
}

.button {
  @apply rounded-xl bg-slate-950 px-5 py-3 font-semibold text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50;
}