/**
 * Boopi design tokens.
 *
 * Global component code consumes semantic --boopi-* roles. Raw palette values
 * are implementation primitives and must not be used directly in components.
 */

@font-face {
	font-display: swap;
	font-family: "Fredoka";
	font-style: normal;
	font-weight: 300 700;
	src: url("../fonts/fredoka/fredoka-latin-variable.woff2") format("woff2");
}

:root {
	/* Palette primitives. */
	--boopi-palette-white: #fff;
	--boopi-palette-cream-50: #fffaf6;
	--boopi-palette-cream-100: #faf1e8;
	--boopi-palette-coral-50: #fff3f2;
	--boopi-palette-coral-100: #ffe3e0;
	--boopi-palette-coral-300: #f5aaa4;
	--boopi-palette-coral-500: #e86261;
	--boopi-palette-coral-600: #c94343;
	--boopi-palette-coral-700: #b03531;
	--boopi-palette-coral-800: #8d2926;
	--boopi-palette-teal-50: #edf9f7;
	--boopi-palette-teal-100: #d2f0eb;
	--boopi-palette-teal-700: #006c65;
	--boopi-palette-teal-800: #00534e;
	--boopi-palette-sage-100: #e6f2df;
	--boopi-palette-sage-600: #52734b;
	--boopi-palette-sage-700: #41623b;
	--boopi-palette-lilac-100: #eee7f6;
	--boopi-palette-lilac-500: #8565b3;
	--boopi-palette-lilac-600: #7956a8;
	--boopi-palette-rose-500: #b94f65;
	--boopi-palette-rose-600: #a94056;
	--boopi-palette-yellow-300: #ffd45c;
	--boopi-palette-neutral-50: #f8f7f5;
	--boopi-palette-neutral-100: #efedea;
	--boopi-palette-neutral-200: #dedbd6;
	--boopi-palette-neutral-500: #6b6865;
	--boopi-palette-neutral-700: #45423f;
	--boopi-palette-neutral-900: #252525;
	--boopi-palette-green-50: #edf8f0;
	--boopi-palette-green-700: #216e39;
	--boopi-palette-amber-50: #fff7e6;
	--boopi-palette-amber-400: #fcc800;
	--boopi-palette-amber-700: #765e00;
	--boopi-palette-amber-800: #7a4b00;
	--boopi-palette-apricot-50: #fff1e9;
	--boopi-palette-apricot-600: #c55332;
	--boopi-palette-red-50: #fff0ef;
	--boopi-palette-red-700: #a12622;
	--boopi-palette-blue-50: #edf7fa;
	--boopi-palette-blue-100: #d7dff0;
	--boopi-palette-blue-800: #005f73;

	/* Semantic color roles. */
	--boopi-color-canvas: var(--boopi-palette-cream-50);
	--boopi-color-surface: var(--boopi-palette-white);
	--boopi-color-surface-subtle: var(--boopi-palette-neutral-50);
	--boopi-color-surface-brand: var(--boopi-palette-coral-50);
	--boopi-color-surface-accent: var(--boopi-palette-teal-50);
	--boopi-color-decoration-coral: var(--boopi-palette-coral-300);
	--boopi-color-decoration-sage: var(--boopi-palette-sage-100);
	--boopi-color-decoration-lilac: var(--boopi-palette-lilac-100);
	--boopi-color-action-lilac: var(--boopi-palette-lilac-500);
	--boopi-color-action-lilac-hover: var(--boopi-palette-lilac-600);
	--boopi-color-action-pink: var(--boopi-palette-rose-500);
	--boopi-color-action-pink-hover: var(--boopi-palette-rose-600);
	--boopi-color-action-sage: var(--boopi-palette-sage-600);
	--boopi-color-action-sage-hover: var(--boopi-palette-sage-700);
	--boopi-color-decoration-blue: var(--boopi-palette-blue-100);
	--boopi-color-decoration-yellow: var(--boopi-palette-yellow-300);
	--boopi-color-brand-primary: var(--boopi-palette-coral-600);
	--boopi-color-home-hero-heading: var(--boopi-color-brand-primary);
	--boopi-color-text: var(--boopi-palette-neutral-900);
	--boopi-color-text-muted: var(--boopi-palette-neutral-700);
	--boopi-color-heading: var(--boopi-palette-neutral-900);
	--boopi-color-link: var(--boopi-palette-coral-800);
	--boopi-color-link-hover: var(--boopi-palette-coral-700);
	--boopi-color-action: var(--boopi-palette-coral-700);
	--boopi-color-action-hover: var(--boopi-palette-coral-800);
	--boopi-color-action-text: var(--boopi-palette-white);
	--boopi-color-focus: var(--boopi-palette-teal-700);
	--boopi-color-border: var(--boopi-palette-neutral-200);
	--boopi-color-border-strong: var(--boopi-palette-neutral-500);
	--boopi-color-disabled-surface: var(--boopi-palette-neutral-100);
	--boopi-color-disabled-text: var(--boopi-palette-neutral-500);
	--boopi-color-selection: var(--boopi-palette-coral-100);
	--boopi-color-selection-text: var(--boopi-palette-neutral-900);
	--boopi-color-overlay: rgb(37 37 37 / 45%);
	--boopi-color-info: var(--boopi-palette-blue-800);
	--boopi-color-info-surface: var(--boopi-palette-blue-50);
	--boopi-color-success: var(--boopi-palette-green-700);
	--boopi-color-success-surface: var(--boopi-palette-green-50);
	--boopi-color-warning: var(--boopi-palette-amber-800);
	--boopi-color-warning-surface: var(--boopi-palette-amber-50);
	--boopi-color-action-gold: var(--boopi-palette-amber-400);
	--boopi-color-action-gold-text: var(--boopi-palette-amber-700);
	--boopi-color-action-gold-surface: var(--boopi-palette-amber-50);
	--boopi-color-action-apricot: var(--boopi-palette-apricot-600);
	--boopi-color-action-apricot-surface: var(--boopi-palette-apricot-50);
	--boopi-color-error: var(--boopi-palette-red-700);
	--boopi-color-error-surface: var(--boopi-palette-red-50);

	/* Homepage component roles: one restrained family, varied by section accent. */
	--boopi-color-home-card-border: color-mix(in srgb, var(--boopi-color-border) 70%, transparent);
	--boopi-color-home-card-pink-surface: color-mix(in srgb, var(--boopi-color-decoration-coral) 19%, var(--boopi-color-canvas));
	--boopi-color-home-card-pink-border: color-mix(in srgb, var(--boopi-color-decoration-coral) 28%, transparent);
	--boopi-color-home-card-lilac-surface: color-mix(in srgb, var(--boopi-color-decoration-lilac) 72%, var(--boopi-color-canvas));
	--boopi-color-home-card-lilac-border: color-mix(in srgb, var(--boopi-color-decoration-lilac) 60%, var(--boopi-color-border));
	--boopi-color-home-card-sage-surface: color-mix(in srgb, var(--boopi-color-decoration-sage) 58%, var(--boopi-color-canvas));
	--boopi-color-home-value-coral-surface: color-mix(in srgb, var(--boopi-palette-coral-100) 52%, var(--boopi-color-surface));
	--boopi-color-home-value-coral-accent: var(--boopi-palette-coral-700);
	--boopi-color-home-value-sage-surface: color-mix(in srgb, var(--boopi-palette-sage-100) 58%, var(--boopi-color-surface));
	--boopi-color-home-value-sage-accent: var(--boopi-palette-sage-600);
	--boopi-color-home-value-gold-surface: color-mix(in srgb, var(--boopi-palette-amber-50) 78%, var(--boopi-color-surface));
	--boopi-color-home-value-gold-accent: var(--boopi-color-action-gold);
	--boopi-color-home-value-blue-surface: color-mix(in srgb, var(--boopi-palette-blue-100) 58%, var(--boopi-color-surface));
	--boopi-color-home-value-blue-accent: var(--boopi-palette-blue-800);
	--boopi-color-home-product-shadow: color-mix(in srgb, var(--boopi-palette-amber-50) 62%, var(--boopi-palette-neutral-100));
	--boopi-color-configurator-cart-surface: color-mix(in srgb, var(--boopi-palette-yellow-300) 10%, var(--boopi-color-surface));
	--boopi-color-footer-surface: var(--boopi-color-surface);
	--boopi-color-footer-accent: var(--boopi-color-home-hero-heading);

	/* Body and general UI remain system-based; playful display use is scoped. */
	--boopi-font-family-body: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--boopi-font-family-heading: var(--boopi-font-family-body);
	--boopi-font-family-playful: "Fredoka", var(--boopi-font-family-heading);
	--boopi-font-family-mono: ui-monospace, "SFMono-Regular", consolas, "Liberation Mono", monospace;
	--boopi-font-weight-regular: 400;
	--boopi-font-weight-medium: 500;
	--boopi-font-weight-semibold: 600;
	--boopi-font-weight-bold: 700;
	--boopi-font-size-xs: 0.75rem;
	--boopi-font-size-sm: 0.875rem;
	--boopi-font-size-md: 1rem;
	--boopi-font-size-lg: 1.125rem;
	--boopi-font-size-xl: 1.25rem;
	--boopi-font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
	--boopi-font-size-3xl: clamp(2rem, 1.65rem + 1.75vw, 3rem);
	--boopi-line-height-tight: 1.2;
	--boopi-line-height-heading: 1.3;
	--boopi-line-height-body: 1.6;
	--boopi-line-height-control: 1.25;
	--boopi-letter-spacing-tight: -0.015em;
	--boopi-letter-spacing-normal: 0;
	--boopi-letter-spacing-wide: 0.04em;
	--boopi-text-measure: 68ch;
	--boopi-text-measure-narrow: 45ch;
	--boopi-font-size-home-section-title: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	--boopi-font-size-home-card-title: var(--boopi-font-size-xl);
	--boopi-font-size-home-step-title: clamp(1.3rem, 1.18rem + 0.55vw, 1.6rem);

	/* Spacing uses a compact 4px-based scale. */
	--boopi-space-0: 0;
	--boopi-space-1: 0.25rem;
	--boopi-space-2: 0.5rem;
	--boopi-space-3: 0.75rem;
	--boopi-space-4: 1rem;
	--boopi-space-5: 1.5rem;
	--boopi-space-6: 2rem;
	--boopi-space-7: 3rem;
	--boopi-space-8: 4.5rem;
	--boopi-space-section: clamp(3rem, 2rem + 4vw, 6rem);

	/* Sizing. */
	--boopi-size-control-min: 2.75rem;
	--boopi-size-icon-sm: 1rem;
	--boopi-size-icon-md: 1.25rem;
	--boopi-size-icon-lg: 1.5rem;
	--boopi-size-logo-header: 4.5rem;
	--boopi-size-content-measure: 45rem;

	/* Borders and shape. */
	--boopi-border-width: 1px;
	--boopi-border-width-strong: 2px;
	--boopi-radius-none: 0;
	--boopi-radius-sm: 0.375rem;
	--boopi-radius-md: 0.75rem;
	--boopi-radius-lg: 1.25rem;
	--boopi-radius-pill: 999px;
	--boopi-home-card-radius: var(--boopi-radius-lg);
	--boopi-home-card-border-width: var(--boopi-border-width);
	--boopi-home-card-shadow: var(--boopi-shadow-sm);
	--boopi-home-card-padding: clamp(var(--boopi-space-5), 4vw, var(--boopi-space-7));

	/* Elevation. */
	--boopi-shadow-none: none;
	--boopi-shadow-sm: 0 1px 2px rgb(37 37 37 / 8%);
	--boopi-shadow-md: 0 0.5rem 1.5rem rgb(37 37 37 / 12%);
	--boopi-shadow-lg: 0 1rem 2.5rem rgb(37 37 37 / 16%);

	/* Layer order. */
	--boopi-layer-base: 0;
	--boopi-layer-sticky: 100;
	--boopi-layer-dropdown: 200;
	--boopi-layer-overlay: 300;
	--boopi-layer-dialog: 400;
	--boopi-layer-toast: 500;

	/* Motion. */
	--boopi-motion-instant: 0ms;
	--boopi-motion-fast: 120ms;
	--boopi-motion-normal: 200ms;
	--boopi-motion-slow: 320ms;
	--boopi-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--boopi-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

	/* Layout. */
	--boopi-container-narrow: 45rem;
	--boopi-container-default: 75rem;
	--boopi-container-storefront: 82rem;
	--boopi-container-wide: 90rem;
	--boopi-gutter: clamp(1rem, 0.65rem + 1.5vw, 2rem);
	--boopi-header-offset: 5.5rem;
	--boopi-admin-bar-offset: 0px;

	/*
	 * Breakpoint reference values. Custom properties cannot be consumed by
	 * media-query conditions; CSS media queries repeat these documented values.
	 */
	--boopi-breakpoint-small: 30rem;
	--boopi-breakpoint-medium: 48rem;
	--boopi-breakpoint-large: 64rem;
	--boopi-breakpoint-wide: 80rem;
}

body.admin-bar {
	--boopi-admin-bar-offset: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 782px) {
	body.admin-bar {
		--boopi-admin-bar-offset: var(--wp-admin--admin-bar--height, 46px);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--boopi-motion-fast: 0ms;
		--boopi-motion-normal: 0ms;
		--boopi-motion-slow: 0ms;
	}
}