/**
 * Mariener design tokens — single source of truth.
 *
 * Human docs: assets/rey-child/docs/DESIGN-SYSTEM.md
 * Agent rules: AGENTS.md, .cursor/rules/design-system.mdc
 *
 * Do not duplicate these values in template CSS. Reference var(--mariener-*).
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
	/* Surfaces */
	--mariener-bg: #fbfaf8;
	--mariener-surface: #ffffff;
	--mariener-secondary: #f6f4f1;
	--mariener-placeholder: #efeae3;

	/* Text */
	--mariener-ink: #141414;
	--mariener-muted: #737373;
	--mariener-accent: #ff3c00;

	/* Lines */
	--mariener-line: rgba(20, 20, 20, 0.1);
	--mariener-hairline: rgba(20, 20, 20, 0.06);

	/* Typography */
	--mariener-font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mariener-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mariener-display: var(--mariener-font-display);
	--mariener-body: var(--mariener-font-body);

	/* Page width + horizontal spacing */
	--mariener-page-max: 1400px;
	--mariener-gutter: 32px;
	--mariener-container: min(calc(100% - (var(--mariener-gutter) * 2)), var(--mariener-page-max));
	--mariener-inline-align: max(var(--mariener-gutter), calc((100% - var(--mariener-container)) / 2));

	/* Corner radius */
	--mariener-radius-pill: 999px;
	--mariener-radius-control: 8px;
	--mariener-radius-soft: 16px;
	--mariener-radius-card: 24px;
	--mariener-radius-media: 24px;

	/* Elevation */
	--mariener-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.15);

	/* Spacing scale */
	--mariener-space-1: 8px;
	--mariener-space-2: 16px;
	--mariener-space-3: 24px;
	--mariener-space-4: 32px;
	--mariener-space-5: 48px;
	--mariener-space-6: 64px;
	--mariener-space-7: 96px;
}

@media (max-width: 900px) {
	:root {
		--mariener-gutter: 24px;
	}
}

@media (max-width: 560px) {
	:root {
		--mariener-gutter: 16px;
	}
}