/**
 * PasionGift App — Design Tokens
 *
 * Global CSS custom properties for layout and UI.
 *
 * @package PasionGift_App
 */

:root {
	/* ── Heights ─────────────────────────────────────── */
	--pg-header-height: 3.5rem;
	--pg-bottom-nav-height: 3.5rem;
	--pg-header-search-height: 2.375rem;
	--pg-header-action-size: 2.375rem;

	/* ── Spacing scale ───────────────────────────────── */
	--pg-space-xs: 0.25rem;
	--pg-space-sm: 0.5rem;
	--pg-space-md: 1rem;
	--pg-space-lg: 1.5rem;
	--pg-space-xl: 2rem;
	--pg-space-2xl: 2.5rem;

	/* ── Grid & section gaps ─────────────────────────── */
	--pg-grid-gap: var(--pg-space-sm);
	--pg-section-gap: var(--pg-space-lg);
	--pg-section-title-gap: var(--pg-space-sm);

	/* ── Z-index layers ──────────────────────────────── */
	--pg-z-base: 0;
	--pg-z-main: 1;
	--pg-z-header: 100;
	--pg-z-bottom-nav: 100;
	--pg-z-overlay: 200;

	/* ── Layout (mobile M default: 390–767px) ────────── */
	--pg-max-width: 100%;
	--pg-shell-padding-x: var(--pg-space-md);
	--pg-main-padding-y: 0.75rem;
	--pg-header-gap: 0.5rem;
	--pg-header-search-min-width: 7.5rem;
	--pg-header-border: 1px solid rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.08);
	--pg-header-border-color: rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.08);
	--pg-header-bg: var(--pg-color-surface);
	--pg-header-icon-color: var(--pg-color-brand-wine);
	--pg-header-wordmark-color: var(--pg-color-brand-black, var(--pg-color-text));
	--pg-header-wordmark-weight: var(--pg-font-weight-semibold);
	--pg-header-logo-mark-size: 1.125rem;
	--pg-header-logo-mark-size-mobile: 1rem;
	--pg-header-logo-mark-size-desktop: 1.25rem;
	--pg-header-wordmark-size: var(--pg-type-logo);
	--pg-header-wordmark-size-mobile: 0.8125rem;
	--pg-header-logo-gap: 0.375rem;
	--pg-header-logo-gap-mobile: 0.25rem;
	--pg-header-logo-gap-desktop: 0.5rem;
	--pg-logo-max-width: 7.25rem;
	--pg-product-body-min-height: 3.25rem;
	--pg-bottom-nav-label-size: var(--pg-font-size-xs);
	--pg-bottom-nav-link-padding-x: var(--pg-space-xs);
	--pg-bottom-nav-icon-size: 1.25rem;

	/* ── Safe areas (notched devices) ────────────────── */
	--pg-safe-top: env(safe-area-inset-top, 0px);
	--pg-safe-bottom: env(safe-area-inset-bottom, 0px);
	--pg-safe-left: env(safe-area-inset-left, 0px);
	--pg-safe-right: env(safe-area-inset-right, 0px);

	/* ── Brand palette (PasionGift Premium) ──────────── */
	--pg-color-brand-wine: #8b1e3f;
	--pg-color-brand-beige: #cfbaa5;
	--pg-color-brand-rose: #d98ca3;
	--pg-color-brand-nude: #f8e9e3;
	--pg-color-brand-black: #1c1c1c;
	--pg-color-brand-wine-rgb: 139, 30, 63;
	--pg-color-brand-rose-rgb: 217, 140, 163;

	/* ── Color (UI) ──────────────────────────────────── */
	--pg-color-surface: #ffffff;
	--pg-color-border: #eadfd9;
	--pg-color-border-subtle: #f3e8e3;
	--pg-color-text: #1c1c1c;
	--pg-color-text-muted: #6b5f5c;
	--pg-color-text-placeholder: #9a8c88;
	--pg-color-accent: #8b1e3f;
	--pg-color-interactive-bg: #f8e9e3;
	--pg-color-interactive-hover: #f1ddd5;
	--pg-color-hero-bg: #f8e9e3;

	/* ── Typography scale ────────────────────────────── */
	--pg-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pg-font-size-xs: 0.75rem;
	--pg-font-size-sm: 0.875rem;
	--pg-font-size-base: 1rem;
	--pg-font-size-md: 1.125rem;
	--pg-font-size-lg: 1.375rem;
	--pg-font-size-xl: 1.625rem;
	--pg-font-weight-medium: 500;
	--pg-font-weight-semibold: 600;
	--pg-line-height-tight: 1.2;
	--pg-line-height-snug: 1.35;
	--pg-line-height-normal: 1.5;
	--pg-letter-spacing-tight: -0.02em;
	--pg-letter-spacing-snug: -0.01em;

	/* ── Typography roles ────────────────────────────── */
	--pg-type-section-title: var(--pg-font-size-md);
	--pg-type-hero-title: var(--pg-font-size-lg);
	--pg-type-hero-subtitle: var(--pg-font-size-sm);
	--pg-type-product-name: 0.8125rem;
	--pg-type-product-price: 0.8125rem;
	--pg-type-logo: 0.9375rem;

	/* ── Shape ───────────────────────────────────────── */
	--pg-radius-sm: 0.5rem;
	--pg-radius-md: 0.75rem;
	--pg-radius-lg: 1rem;
	--pg-radius-full: 9999px;

	/* ── Shadows ─────────────────────────────────────── */
	--pg-shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.04);
	--pg-shadow-md: 0 2px 8px rgba(26, 26, 46, 0.06);
	--pg-shadow-search: inset 0 0 0 1px var(--pg-color-border-subtle);

	/* ── Cards ───────────────────────────────────────── */
	--pg-card-radius: var(--pg-radius-sm);
	--pg-card-padding: var(--pg-space-sm);
	--pg-card-padding-compact: var(--pg-space-xs) var(--pg-space-sm);
	--pg-product-media-ratio: 4 / 3;
	--pg-logo-height: 1.375rem;

	/* ── Touch & interaction ─────────────────────────── */
	--pg-touch-target: 2.75rem;

	/* ── Motion ──────────────────────────────────────── */
	--pg-transition-fast: 0.18s;
	--pg-transition-overlay: 0.24s;
	--pg-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Mobile full viewport (<768px) ───────────────────── */
@media (max-width: 767px) {
	:root {
		--pg-max-width: 100%;
		--pg-header-search-min-width: 0;
	}
}

/* ── Compact mobile (320–359px) ──────────────────────── */
@media (max-width: 359px) {
	:root {
		--pg-shell-padding-x: 0.6875rem;
		--pg-main-padding-y: 0.625rem;
		--pg-section-gap: 1.25rem;
		--pg-header-gap: 0.375rem;
		--pg-logo-max-width: 5.75rem;
		--pg-type-logo: 0.8125rem;
		--pg-header-search-height: 2.125rem;
		--pg-header-action-size: 2.25rem;
		--pg-grid-gap: var(--pg-space-sm);
		--pg-bottom-nav-label-size: clamp(0.625rem, 2.85vw, 0.6875rem);
		--pg-bottom-nav-link-padding-x: 0;
		--pg-bottom-nav-icon-size: 1.125rem;
		--pg-card-padding-compact: 0.375rem 0.5rem;
		--pg-type-product-price: 0.6875rem;
		--pg-product-body-min-height: 3rem;
	}
}

/* ── Mobile S (360–389px) ────────────────────────────── */
@media (min-width: 360px) and (max-width: 389px) {
	:root {
		--pg-shell-padding-x: 0.875rem;
		--pg-main-padding-y: 0.75rem;
		--pg-section-gap: 1.375rem;
		--pg-logo-max-width: 6.5rem;
		--pg-type-logo: 0.875rem;
		--pg-bottom-nav-label-size: 0.6875rem;
		--pg-bottom-nav-icon-size: 1.1875rem;
		--pg-product-body-min-height: 3.125rem;
	}
}

/* ── Desktop adaptation ──────────────────────────────── */
@media (min-width: 768px) {
	:root {
		--pg-header-height: 4rem;
		--pg-bottom-nav-height: 4rem;
		--pg-header-search-height: 2.5rem;
		--pg-header-action-size: 2.5rem;
		--pg-max-width: 30rem;
		--pg-shell-padding-x: var(--pg-space-lg);
		--pg-main-padding-y: var(--pg-space-md);
		--pg-grid-gap: var(--pg-space-md);
		--pg-section-gap: var(--pg-space-xl);
		--pg-type-hero-title: var(--pg-font-size-xl);
		--pg-logo-height: 1.5rem;
		--pg-header-search-min-width: 9rem;
		--pg-logo-max-width: 6.5rem;
		--pg-bottom-nav-icon-size: 1.375rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--pg-max-width: 40rem;
	}
}