/*
 * Toga storefront tokens.
 *
 * theme.json owns editor-facing presets. These aliases expose the same values
 * to the hand-authored WooCommerce and Dokan layers, plus the interaction and
 * layering tokens that theme.json cannot express. Keep duplicated palette
 * values synchronized with theme.json.
 *
 * Breakpoints: 360px narrow phone, 600px large phone, 768px tablet,
 * 1024px desktop, 1280px wide desktop. Custom properties cannot be used in
 * media-query conditions, so the values are documented here and repeated.
 */

:root {
	/* Color. */
	--toga-paper: #F6F1E9;
	--toga-ink: #171614;
	--toga-surface: #FFFFFF;
	--toga-muted: #6D6962;
	--toga-border: #DED8CF;
	--toga-border-strong: #C9C1B6;
	--toga-terracotta: #B85C3D;
	--toga-terracotta-hover: #94472F;
	--toga-ink-hover: #34312D;
	--toga-success: #2F7D57;
	--toga-warning: #A86612;
	--toga-error: #B33A3A;
	--toga-ink-80: rgb(23 22 20 / 80%);
	--toga-ink-70: rgb(23 22 20 / 70%);
	--toga-ink-60: rgb(23 22 20 / 60%);

	/* Typography. */
	--toga-font-ui: var(--wp--preset--font-family--interface, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
	--toga-font-editorial: var(--wp--preset--font-family--editorial, Iowan Old Style, Baskerville, "Times New Roman", Times, serif);
	/* Compatibility aliases consumed by pre-foundation component files. */
	--wp--preset--font-family--inter: var(--toga-font-ui);
	--wp--preset--font-family--poppins: var(--toga-font-editorial);
	--toga-text-caption: 0.75rem;
	--toga-text-small: 0.875rem;
	--toga-text-body: 1rem;
	--toga-text-lead: clamp(1.125rem, 1.5vw, 1.375rem);
	--toga-text-heading: clamp(1.5rem, 3vw, 2.25rem);
	--toga-text-display: clamp(2.5rem, 7vw, 5.5rem);
	--toga-leading-tight: 1.08;
	--toga-leading-heading: 1.2;
	--toga-leading-body: 1.6;

	/* Spacing. */
	--toga-space-1: 0.25rem;
	--toga-space-2: 0.5rem;
	--toga-space-3: 0.75rem;
	--toga-space-4: 1rem;
	--toga-space-5: 1.5rem;
	--toga-space-6: 2rem;
	--toga-space-7: 2.5rem;
	--toga-space-8: 3rem;
	--toga-space-9: 4rem;
	--toga-space-10: 5rem;

	/* Widths and responsive gutters. */
	--toga-narrow-width: 560px;
	--toga-text-width: 760px;
	--toga-content-width: 960px;
	--toga-commerce-width: 1280px;
	--toga-wide-width: 1440px;
	--toga-gutter: clamp(1rem, 3vw, 3rem);

	/* Borders, radii, shadows. */
	--toga-border-width: 1px;
	--toga-radius-sm: 2px;
	--toga-radius-card: 6px;
	--toga-radius-md: 6px;
	--toga-radius-lg: 12px;
	--toga-radius-pill: 999px;
	--toga-shadow-sm: 0 1px 2px rgb(23 22 20 / 8%);
	--toga-shadow-md: 0 12px 34px rgb(23 22 20 / 12%);

	/* Image geometry. */
	--toga-ratio-card: 3 / 4;
	--toga-ratio-square: 1 / 1;
	--toga-ratio-hero-mobile: 4 / 5;
	--toga-ratio-hero-desktop: 21 / 9;

	/* Controls and focus. */
	--toga-control-height: 44px;
	--toga-control-radius: 2px;
	--toga-tap-target: 44px;
	--toga-btn-radius: 2px;
	--toga-btn-padding-y: 0.75em;
	--toga-btn-padding-x: 2.25em;
	--toga-btn-padding-y-sm: 0.6em;
	--toga-btn-padding-x-sm: 1.5em;
	--toga-focus-ring-width: 2px;
	--toga-focus-ring-color: var(--toga-terracotta);
	--toga-focus-ring-offset: 3px;

	/* Motion. */
	--toga-duration-fast: 120ms;
	--toga-duration-base: 200ms;
	--toga-duration-menu: 220ms;
	--toga-ease: cubic-bezier(0.2, 0, 0, 1);
	/* Shared interactive-state transition — the default for hover/focus
	   color, background and border changes on links, buttons and triggers.
	   Reduced-motion is handled by the durations above going to 0ms, so
	   consumers do not need their own prefers-reduced-motion override. */
	--toga-transition: color var(--toga-duration-base) var(--toga-ease),
		background-color var(--toga-duration-base) var(--toga-ease),
		border-color var(--toga-duration-base) var(--toga-ease);

	/* Layering. */
	--toga-z-dropdown: 30;
	--toga-z-sticky: 40;
	--toga-z-overlay: 50;
	--toga-z-modal: 60;

	/* Dokan reads these variables at the root. */
	--dokan-button-background-color: var(--toga-ink);
	--dokan-button-hover-background-color: var(--toga-ink-hover);
	--dokan-button-text-color: var(--toga-paper);
	--dokan-button-hover-text-color: var(--toga-paper);
	--dokan-button-border-color: var(--toga-ink);
	--dokan-button-hover-border-color: var(--toga-ink-hover);
	--dokan-sidebar-background-color: var(--toga-ink);
	--dokan-sidebar-hover-background-color: var(--toga-ink-hover);
	--dokan-link-color: var(--toga-terracotta);
	--dokan-link-hover-color: var(--toga-terracotta-hover);
}

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