/**
 * FRYD.CA Design Tokens
 * Single source of truth for visual values — see docs/design-system.md.
 * Placeholder brand colors ship until the licensor's approved brand kit
 * arrives (docs/known-limitations.md item 2).
 */
:root {
	/* Color — placeholder palette, premium/dark-leaning, swap for approved brand kit */
	--fryd-color-bg: #0e0f11;
	--fryd-color-surface: #17181b;
	--fryd-color-surface-raised: #202226;
	--fryd-color-border: #2e3136;
	--fryd-color-text: #f4f4f5;
	--fryd-color-text-muted: #a1a1aa;
	/* Darkened from #7c5cff — axe flagged white-on-accent buttons
	   (.fryd-btn--primary, used for every primary CTA sitewide) at 4.34:1,
	   below the 4.5:1 AA threshold for normal-size text. --fryd-color-accent
	   is only ever used as a background-behind-white-text or a
	   border/outline color here (never as foreground text on the dark
	   surface), so darkening it site-wide has no opposite-direction
	   contrast tradeoff to weigh. */
	--fryd-color-accent: #7053e6;
	--fryd-color-accent-contrast: #ffffff;
	--fryd-color-success: #2fbf71;
	--fryd-color-warning: #e8a33d;
	--fryd-color-danger: #e5484d;
	/* Sale badge darkened from the shared #e5484d for the same reason
	   (white-on-color badge fill measured at 3.91:1) — --fryd-color-danger
	   stays unchanged since it's only used as text-on-dark/border color
	   elsewhere. --fryd-color-new now matches the accent above. */
	--fryd-color-sale: #c33d41;
	--fryd-color-new: var(--fryd-color-accent);

	/* Typography */
	--fryd-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fryd-font-display: var(--fryd-font-body); /* swap for licensed display face when supplied */
	--fryd-text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
	--fryd-text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
	--fryd-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fryd-text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
	--fryd-text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--fryd-text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--fryd-text-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
	--fryd-line-tight: 1.15;
	--fryd-line-normal: 1.55;

	/* Spacing scale (4px base) */
	--fryd-space-1: 4px;
	--fryd-space-2: 8px;
	--fryd-space-3: 12px;
	--fryd-space-4: 16px;
	--fryd-space-6: 24px;
	--fryd-space-8: 32px;
	--fryd-space-12: 48px;
	--fryd-space-16: 64px;
	--fryd-space-24: 96px;

	/* Layout */
	--fryd-content-width: 1280px;
	--fryd-content-width-narrow: 640px;
	--fryd-grid-gap: var(--fryd-space-6);

	/* Shape */
	--fryd-radius-sm: 4px;
	--fryd-radius-md: 8px;
	--fryd-radius-lg: 16px;
	--fryd-border-width: 1px;

	/* Elevation */
	--fryd-shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.24);
	--fryd-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.32);

	/* Motion */
	--fryd-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--fryd-duration: 180ms;

	/* Touch targets (accessibility — brief section 14) */
	--fryd-tap-target-min: 44px;
}

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

/* Light-mode override slot — kept for future toggle, not built out this phase */
@media (prefers-color-scheme: light) {
	:root[data-fryd-theme="auto"] {
		--fryd-color-bg: #ffffff;
		--fryd-color-surface: #f6f6f7;
		--fryd-color-surface-raised: #ffffff;
		--fryd-color-border: #e4e4e7;
		--fryd-color-text: #17181b;
		--fryd-color-text-muted: #52525b;
	}
}