@import "tailwindcss";

@theme {
	/* Brand palette (Figma) */
	--color-ink: #090909;
	--color-night: #010a0f;
	--color-paper: #f9f9f9;
	--color-mint: #00e0b5;
	--color-mint-soft: #c8f9ee;
	--color-jade: #04b593;
	--color-ice: #f1f7fb;
	--color-violet: #9747ff;
	/* Form field fill */
	--color-mist: #f9fafd;
	/* Form errors (as in landing-astro) */
	--color-pink: #ff0086;
	/* Secondary text: #1B1F26 at 72% */
	--color-muted: rgb(27 31 38 / 0.72);

	/* Radii */
	--radius-button: 10px;
	--radius-tag: 15px;
	--radius-card: 20px;
	--radius-pill: 30px;

	/* Outfit's natural line height is ~1.26 in the design. */
	--default-line-height: 1.26;
	--text-xs--line-height: 1.26;
	--text-sm--line-height: 1.26;
	--text-base--line-height: 1.26;
	--text-xl--line-height: 1.26;
	--text-2xl--line-height: 1.26;

	/* Card titles (steps band, printer card) */
	--text-title: 1.75rem;
	--text-title--line-height: 1.2;
	/* Section headings (H2): 40px mobile, 44px desktop */
	--text-heading-sm: 2.5rem;
	--text-heading-sm--line-height: 1.125;
	--text-heading: 2.75rem;
	--text-heading--line-height: 1.26;
	/* Hero headline (H1): 48px mobile, 60px desktop */
	--text-display-sm: 3rem;
	--text-display-sm--line-height: 1.05;
	--text-display: 3.75rem;
	--text-display--line-height: 1.26;
}

@theme inline {
	--font-sans: var(--font-outfit), ui-sans-serif, system-ui, sans-serif;
}

/*
 * Soft glows behind the hero (Figma radial fills). Positions are relative to the glow layer,
 * which overhangs its section by 6rem at the top and bottom (see ui/Glow.astro).
 */
@utility bg-hero-glow {
	background-image:
		radial-gradient(28rem 24rem at 100% 33%, rgb(151 71 255 / 0.16), transparent 70%),
		radial-gradient(24rem 20rem at 20% 80%, rgb(125 237 215 / 0.28), transparent 70%);

	@variant lg {
		background-image:
			radial-gradient(34rem 30rem at 72% 25%, rgb(151 71 255 / 0.18), transparent 70%),
			radial-gradient(36rem 26rem at 18% 74%, rgb(125 237 215 / 0.3), transparent 70%);
	}
}

/* Dark card with a violet glow; place it with `--glow-x` / `--glow-y`. */
@utility bg-violet-glow {
	background-color: var(--color-night);
	background-image: radial-gradient(
		circle at var(--glow-x, 20%) var(--glow-y, 50%),
		#9747ff 0,
		#6e34ba 6%,
		transparent 30%
	);
}

/* Dark card with a green glow; place it with `--glow-x` / `--glow-y`. */
@utility bg-mint-glow {
	background-color: var(--color-ink);
	background-image: radial-gradient(
		circle at var(--glow-x, 65%) var(--glow-y, 55%),
		var(--color-mint) 0,
		#056855 4%,
		transparent 45%
	);
}

/* Dark panel with a soft vertical beam behind the illustration (payment methods). */
@utility bg-beam-violet {
	background-color: var(--color-night);
	background-image: radial-gradient(ellipse 22% 55% at 45% 50%, rgb(151 71 255 / 0.55), transparent);
}

@utility bg-beam-mint {
	background-color: var(--color-night);
	background-image: radial-gradient(ellipse 30% 45% at 45% 55%, rgb(0 224 181 / 0.35), transparent);
}

@utility scrollbar-none {
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

@layer base {
	html {
		/* Anchored sections land below the sticky header (5.625rem + its 1px border). */
		--header-height: calc(5.625rem + 1px);
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--header-height) + --spacing(5));
	}

	body {
		/* Preflight sets 1.5 on <html>; the design uses Outfit's ~1.26. */
		line-height: var(--default-line-height);
		@apply bg-paper font-sans text-ink antialiased;
	}

	:focus-visible {
		@apply outline-2 outline-offset-2 outline-violet;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	}
}