/**
 * Design tokens.
 * Values match the tokens documented in INVENTORY.md.
 * Kept separate so they're easy to tune from one place.
 */

:root {
	/* Brand palette (rgb triplets so we can use rgb(var(--x) / opacity)) */
	--noble-bg: 240 240 240;
	--noble-surface: 255 255 255;
	--noble-text: 26 26 26;
	--noble-primary: 26 26 26;
	--noble-primary-contrast: 255 255 255;
	--noble-accent: 240 196 23;
	--noble-accent-contrast: 26 26 26;
	--noble-sale: 248 58 58;
	--noble-feature: 128 60 238;
	--noble-success: 0 163 65;
	--noble-warning: 255 183 74;
	--noble-border: 26 26 26;

	/* Type */
	--noble-font-heading: "Barlow", system-ui, sans-serif;
	--noble-font-body: "Barlow", system-ui, sans-serif;
	--noble-heading-weight: 700;
	--noble-body-weight: 500;
	--noble-heading-tracking: -0.02em;
	--noble-body-tracking: 0;

	/* Type scale */
	--noble-text-xs: 0.6875rem;
	--noble-text-sm: 0.75rem;
	--noble-text-base: 0.875rem;
	--noble-text-lg: 1.125rem;
	--noble-h6: 1rem;
	--noble-h5: 1.125rem;
	--noble-h4: 1.375rem;
	--noble-h3: 1.5rem;
	--noble-h2: 2rem;
	--noble-h1: 2.5rem;
	--noble-h0: 3rem;

	/* Spacing scale (rem) */
	--noble-space-1: 0.25rem;
	--noble-space-2: 0.5rem;
	--noble-space-3: 0.75rem;
	--noble-space-4: 1rem;
	--noble-space-5: 1.25rem;
	--noble-space-6: 1.5rem;
	--noble-space-8: 2rem;
	--noble-space-10: 2.5rem;
	--noble-space-12: 3rem;
	--noble-space-16: 4rem;
	--noble-space-20: 5rem;
	--noble-space-24: 6rem;
	--noble-space-28: 7rem;

	/* Layout */
	--noble-container-max: 1600px;
	--noble-container-narrow: 1350px;
	--noble-gutter: var(--noble-space-5);

	/* Radii */
	--noble-radius-xs: 0.25rem;
	--noble-radius-sm: 0.375rem;
	--noble-radius: 0.75rem;
	--noble-radius-lg: 1.5rem;
	--noble-radius-button: 3.75rem;
	--noble-radius-input: 0.5rem;
	--noble-radius-full: 9999px;

	/* Shadows */
	--noble-shadow-sm: 0 2px 8px rgb(var(--noble-text) / 0.10);
	--noble-shadow: 0 5px 15px rgb(var(--noble-text) / 0.10);
	--noble-shadow-md: 0 5px 30px rgb(var(--noble-text) / 0.10);
	--noble-shadow-block: 0 18px 50px rgb(var(--noble-text) / 0.10);

	/* Motion */
	--noble-duration-fast: 150ms;
	--noble-duration: 250ms;
	--noble-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--noble-duration-fast: 0ms;
		--noble-duration: 0ms;
	}
}