/**
 * FashionFlow design tokens.
 *
 * The palette tokens (--ff-color-primary, --ff-color-text, ...) are NOT defined here: inc/colors.php prints
 * them as an inline :root block right after this file, from the values saved in
 * Appearance → Customize → Theme colors (or their defaults).
 *
 * This file holds every other token: colors derived from the palette, fixed overlay colors, typography,
 * spacing, radii, shadows and layout. It is the only stylesheet allowed to contain literal color values;
 * main.css and woocommerce.css must only use var(--ff-*) tokens.
 *
 * Breakpoints (media queries cannot read custom properties, so they are repeated in the stylesheets):
 *   600px  small screens
 *   960px  navigation switches between the mobile panel and the desktop bar (also in assets/js/navigation.js)
 *   1200px wide screens
 */

:root {
	/* Colors derived from the palette. Overridden with color-mix() below where the browser supports it. */
	--ff-color-button-bg-hover: var(--ff-color-button-bg);
	--ff-color-header-hover: transparent;
	--ff-color-header-border: var(--ff-color-border);
	--ff-color-footer-border: var(--ff-color-border);
	--ff-color-footer-muted: var(--ff-color-footer-text);
	--ff-color-card-border: var(--ff-color-border);
	--ff-color-card-border-hover: var(--ff-color-text-muted);
	--ff-color-row-alt: var(--ff-color-surface);
	--ff-color-focus: var(--ff-color-accent);
	--ff-color-control: var(--ff-color-primary);
	--ff-color-price: var(--ff-color-text);
	--ff-color-price-sale: var(--ff-color-sale-bg);
	--ff-color-input-bg: var(--ff-color-card);
	--ff-color-image-placeholder: var(--ff-color-surface);
	--ff-color-hero-disc: var(--ff-color-accent);
	--ff-color-info: var(--ff-color-primary);
	--ff-color-notice-bg: var(--ff-color-surface);
	--ff-color-success-bg: var(--ff-color-surface);
	--ff-color-error-bg: var(--ff-color-surface);

	/* Fixed colors: image overlays and the icon drawn on status colors. */
	--ff-color-overlay: rgb(0 0 0 / 0.45);
	--ff-color-on-overlay: #fff;
	--ff-color-on-status: #fff;

	/* Typography. System font stacks only: no remote fonts are required. */
	--ff-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
	--ff-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--ff-text-xs: 0.75rem;
	--ff-text-sm: 0.875rem;
	--ff-text-base: 1rem;
	--ff-text-lg: 1.125rem;
	--ff-text-xl: 1.25rem;
	--ff-text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--ff-text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--ff-text-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	--ff-leading-tight: 1.2;
	--ff-leading-body: 1.65;
	--ff-weight-heading: 500;
	--ff-weight-strong: 600;
	--ff-tracking-wide: 0.08em;

	/* Spacing scale (rem). */
	--ff-space-1: 0.25rem;
	--ff-space-2: 0.5rem;
	--ff-space-3: 0.75rem;
	--ff-space-4: 1rem;
	--ff-space-5: 1.25rem;
	--ff-space-6: 1.5rem;
	--ff-space-8: 2rem;
	--ff-space-10: 2.5rem;
	--ff-space-12: 3rem;
	--ff-space-16: 4rem;
	--ff-space-20: 5rem;

	/* Shape and depth. */
	--ff-radius-sm: 4px;
	--ff-radius-md: 8px;
	--ff-radius-lg: 14px;
	--ff-radius-pill: 999px;
	--ff-radius-button: var(--ff-radius-sm);
	--ff-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
	--ff-shadow-md: 0 8px 24px rgb(0 0 0 / 0.08);
	--ff-border-width: 1px;

	/* Layout. */
	--ff-container-max: 1280px;
	--ff-content-max: 760px;
	--ff-gutter: clamp(1rem, 4vw, 2rem);
	--ff-tap-target: 44px;
	--ff-logo-max-height: 3rem;
	--ff-header-min-height: 4.5rem;

	/* Products. */
	--ff-product-image-ratio: 3 / 4;
	--ff-product-gap-row: var(--ff-space-8);
	--ff-product-gap-column: var(--ff-space-5);

	/* Motion. */
	--ff-duration: 0.2s;
	--ff-ease: ease;
}

@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--ff-color-button-bg-hover: color-mix(in srgb, var(--ff-color-button-bg) 84%, var(--ff-color-button-text));
		--ff-color-header-hover: color-mix(in srgb, var(--ff-color-header-text) 8%, var(--ff-color-header-bg));
		--ff-color-header-border: color-mix(in srgb, var(--ff-color-header-text) 14%, var(--ff-color-header-bg));
		--ff-color-footer-border: color-mix(in srgb, var(--ff-color-footer-text) 18%, var(--ff-color-footer-bg));
		--ff-color-footer-muted: color-mix(in srgb, var(--ff-color-footer-text) 78%, var(--ff-color-footer-bg));
		--ff-color-card-border-hover: color-mix(in srgb, var(--ff-color-border) 55%, var(--ff-color-text));
		--ff-color-row-alt: color-mix(in srgb, var(--ff-color-surface) 50%, var(--ff-color-card));
		--ff-color-success-bg: color-mix(in srgb, var(--ff-color-success) 8%, var(--ff-color-card));
		--ff-color-error-bg: color-mix(in srgb, var(--ff-color-error) 8%, var(--ff-color-card));
		--ff-color-hero-disc: color-mix(in srgb, var(--ff-color-accent) 32%, var(--ff-color-surface));
	}
}

/* Arabic and other RTL scripts: serif stacks rarely cover them, and letter spacing breaks joined letters. */
:root[dir="rtl"] {
	--ff-font-heading: var(--ff-font-body);
	--ff-tracking-wide: 0;
}

@media (min-width: 960px) {
	:root {
		--ff-logo-max-height: 3.5rem;
	}
}

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