/**
 * Polychrome design tokens — ported from polychrome-main/src/styles.css
 * Prototype reference only: themes/polychrome/ (do not activate that folder).
 */

:root {
	/* Brand */
	--pc-brand-teal: #1ab5c4;
	--pc-brand-magenta: #e6007e;
	--pc-brand-green: #8bc53f;
	--pc-brand-orange: #f39200;
	--pc-brand-yellow: #fcc30b;
	--pc-brand-ink: #14213d;
	--pc-brand-paper: #fbfbfc;
	--pc-brand-muted: #585d68;
	--pc-brand-surface: #f1f4f7;
	--pc-brand-steel: #1f2a44;

	/* Semantic (approx. of prototype oklch primary) */
	--pc-primary: #1ab5c4;
	--pc-primary-foreground: #ffffff;
	--pc-background: var(--pc-brand-paper);
	--pc-foreground: var(--pc-brand-ink);
	--pc-border: color-mix(in srgb, var(--pc-foreground) 10%, transparent);
	--pc-radius: 0.625rem;
	--pc-max: 1440px;
	--pc-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	/* Typography */
	--pc-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
	--pc-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

@keyframes pc-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pc-scale-x {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pc-animate-entry {
		animation: pc-fade-in-up 0.8s var(--pc-ease-out-expo) both;
	}

	.pc-animate-line {
		animation: pc-scale-x 1s var(--pc-ease-out-expo) both;
		transform-origin: left;
	}
}

.pc-brand-spectrum {
	background-image: linear-gradient(
		90deg,
		var(--pc-brand-teal),
		var(--pc-brand-green),
		var(--pc-brand-yellow),
		var(--pc-brand-orange),
		var(--pc-brand-magenta)
	);
}