/*
Design tokens — single source of truth for the theme's visual language.
Values here are mirrored in theme.json (color/type/spacing) so the block
editor's presets stay consistent with the front-end. Keep this file the
one place token values are decided; everything else only reads var(--*).
*/

:root {
	/* Color ---------------------------------------------------------- */
	--color-bg: #ffffff;
	--color-surface: #f8faff;
	--color-ink: #18181b;
	--color-muted: #6b7280;
	--color-border: #e8ebf1;
	/* Matches assets/icons/logo-ubit.svg exactly — the real brand mark,
	   not a placeholder. Contrast on white is ~8.4:1, well past AA.
	   success is the darker (700-level) shade of its hue, not the
	   brighter 600 — the brighter version reads fine visually but lands
	   at ~3.3:1 on white, under the 4.5:1 AA text minimum. */
	--color-primary: #2d40cf;
	--color-sale: #ff0042;
	--color-success: #008732;

	/* Interaction states are derived, not stored, to keep the palette small. */
	--color-success-tint: #75dd4145;
	--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
	--color-primary-tint: color-mix(in srgb, var(--color-primary) 10%, white);
	--color-sale-tint: color-mix(in srgb, var(--color-sale) 10%, white);
	--color-focus-ring: color-mix(in srgb, var(--color-primary) 40%, transparent);

	/* Typography ------------------------------------------------------ */
	--font-sans: 'Peyda', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
	--text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--text-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
	--text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
	--text-3xl: clamp(1.875rem, 1.6rem + 1.3vw, 2.5rem);
	--text-4xl: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--leading-tight: 1.3;   /* headings */
	--leading-snug: 1.45;   /* UI text, buttons, labels */
	--leading-normal: 1.7;  /* body copy — a touch taller than Latin norms for Persian diacritics/descenders */

	/* Spacing scale (4px base) ---------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* Shape ------------------------------------------------------------ */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-full: 999px;

	/* Elevation — used sparingly, on hover/raised states only ---------- */
	--shadow-sm: 0 1px 2px rgb(24 24 27 / 0.06), 0 1px 3px rgb(24 24 27 / 0.08);

	/* Motion ------------------------------------------------------------ */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-fast: 150ms var(--ease);  /* hover, focus */
	--transition-base: 250ms var(--ease);  /* content transitions */

	/* Layout -------------------------------------------------------------- */
	--container-w: 1350px;
	--container-pad: clamp(1rem, 4vw, 2rem);

	/* Height of the fixed app-style bottom nav shown below 1024px
	   (assets/css/bottom-nav.css) -- shared with any other fixed-bottom
	   element (product-single.css's sticky buy bar, footer.css's Telegram
	   button) that needs to sit clear of it instead of underneath it. */
	--bottom-nav-h: 60px;
}

/*
Breakpoints (referenced directly in @media rules — no custom-media without
a build step): 480px small phones · 768px tablets · 1024px small desktop ·
1280px large desktop.
*/

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