/*
 * PrimeHotDeals design tokens (PROVISIONAL, to be finalized before the homepage).
 * Direction: premium shopping-editorial, charcoal + white + orange accent.
 *
 * Contrast notes (my own calculations; verify with a contrast checker):
 * - Orange #c2410c on white is about 5.2:1, which is OK for text.
 * - Orange #c2410c on charcoal is only about 3:1, so DO NOT use it for text on dark.
 * - Use --phd-color-accent-on-dark (#ff8a3d, about 6.7:1 on charcoal) on dark backgrounds.
 */

:root {
	/* Palette. */
	--phd-charcoal-900: #14171a;
	--phd-charcoal-800: #1f2328;
	--phd-charcoal-600: #3d444c;
	--phd-gray-600: #5b636b;
	--phd-gray-200: #d9dde1;
	--phd-gray-100: #f3f4f6;
	--phd-white: #ffffff;
	--phd-orange-700: #c2410c;
	--phd-orange-800: #9a3412;
	--phd-orange-400: #ff8a3d;

	/* Semantic colors: use these in components, not the palette. */
	--phd-color-bg: var(--phd-white);
	--phd-color-surface: var(--phd-gray-100);
	--phd-color-text: var(--phd-charcoal-800);
	--phd-color-text-muted: var(--phd-gray-600);
	--phd-color-border: var(--phd-gray-200);
	--phd-color-accent: var(--phd-orange-700);
	--phd-color-accent-hover: var(--phd-orange-800);
	--phd-color-accent-on-dark: var(--phd-orange-400);
	--phd-color-link: var(--phd-orange-700);
	--phd-color-link-hover: var(--phd-orange-800);
	--phd-color-focus: var(--phd-orange-700);
	--phd-color-header-bg: var(--phd-charcoal-800);
	--phd-color-header-text: var(--phd-white);
	--phd-color-footer-bg: var(--phd-charcoal-900);
	--phd-color-footer-text: var(--phd-gray-200);

	/* Typography: system font stack, no font files to download. */
	--phd-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--phd-text-sm: 0.875rem;
	--phd-text-base: 1rem;
	--phd-text-lg: 1.125rem;
	--phd-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--phd-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--phd-text-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
	--phd-leading-body: 1.6;
	--phd-leading-heading: 1.2;

	/* Spacing scale. */
	--phd-space-1: 0.25rem;
	--phd-space-2: 0.5rem;
	--phd-space-3: 0.75rem;
	--phd-space-4: 1rem;
	--phd-space-6: 1.5rem;
	--phd-space-8: 2rem;
	--phd-space-12: 3rem;

	/* Layout. */
	--phd-container: 75rem;
	--phd-container-narrow: 46rem;
	--phd-gutter: clamp(1rem, 4vw, 2rem);

	/* Shape. */
	--phd-radius-sm: 0.25rem;
	--phd-radius-md: 0.5rem;

	/* Motion: components use this token, and it is zeroed for reduced motion. */
	--phd-motion-duration: 150ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--phd-motion-duration: 0s;
	}
}