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

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body {
	overflow-x: hidden;
	background-color: theme('colors.paper');
	color: theme('colors.ink');
}

@layer components {
	.btn-primary {
		@apply inline-flex items-center gap-2 rounded-lg bg-leaf px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-leaf-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-leaf focus-visible:ring-offset-2;
	}
	.btn-ghost {
		@apply inline-flex items-center gap-2 rounded-lg border border-rule px-5 py-2.5 text-sm font-medium text-ink transition-colors hover:border-muted hover:bg-rule focus-visible:outline-none;
	}
	.section-label {
		@apply text-xs font-semibold uppercase tracking-widest text-leaf;
	}
}