/**
 * Grovidex design tokens.
 *
 * Single source of truth for the Grovidex storefront customization layer.
 * All other Grovidex stylesheets consume these custom properties; raw
 * color/size values must not be repeated elsewhere.
 *
 * Mobile-first: base values target small screens and are widened at the
 * shared breakpoints (768px, 1024px).
 */

:root {
	/* Brand */
	--gvx-teal: #0f5c5c;
	--gvx-bg: #fafaf7;
	--gvx-gold: #ffb547;

	/* Derived brand surfaces and states */
	--gvx-teal-dark: #0b4646;   /* hover/active on teal */
	--gvx-teal-tint: #e5efee;   /* light teal surface (icon tiles, chips) */
	--gvx-teal-wash: #f2f7f6;   /* faint teal band (trust strip) */
	--gvx-gold-dark: #f0a32e;   /* hover/active on gold */
	--gvx-sand: #fbefda;        /* warm gold tint surface */

	/* Neutrals */
	--gvx-ink: #1f2421;         /* headings, primary text */
	--gvx-ink-soft: #3d423f;    /* body text */
	--gvx-ink-muted: #6b7370;   /* secondary/meta text */
	--gvx-ink-on-dark: #f6f9f8; /* text on teal surfaces */
	--gvx-border: #e7e5df;
	--gvx-surface: #ffffff;
	--gvx-surface-dim: #f3f2ec; /* book-cover / image backing */

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

	/* Section vertical rhythm (Phase 12 targets: ~48–64px mobile,
	   ~72–96px desktop) */
	--gvx-section-pad: 3rem;

	/* Border radii */
	--gvx-radius-sm: 8px;
	--gvx-radius-md: 12px;
	--gvx-radius-lg: 16px;
	--gvx-radius-pill: 999px;

	/* Shadows (teal-based, restrained) */
	--gvx-shadow-sm: 0 1px 3px rgba(15, 92, 92, 0.08);
	--gvx-shadow-md: 0 4px 12px rgba(15, 92, 92, 0.12);

	/* Layout */
	--gvx-container-max: 1200px;
	--gvx-container-pad: 1rem;

	/* Typography: system stack with Latin + Devanagari fallbacks.
	   No bundled or third-party fonts in V1. */
	--gvx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Noto Sans", "Noto Sans Devanagari", "Nirmala UI", "Mangal", Ubuntu,
		Cantarell, "Helvetica Neue", Arial, sans-serif;

	/* Type scale */
	--gvx-text-xs: 0.75rem;      /* meta, badges */
	--gvx-text-sm: 0.875rem;     /* card titles, chips */
	--gvx-text-base: 1rem;       /* body */
	--gvx-text-md: 1.125rem;     /* prices, card headings */
	--gvx-text-lg: 1.25rem;      /* collection labels */
	--gvx-text-xl: 1.5rem;       /* section headings (H2) */
	--gvx-text-2xl: 1.75rem;     /* large campaign headings */
	--gvx-text-display: 1.9rem;  /* hero heading (H1) */

	--gvx-leading-tight: 1.15;
	--gvx-leading-snug: 1.35;
	--gvx-leading-body: 1.6;

	/* Motion */
	--gvx-duration: 150ms;
	--gvx-ease: cubic-bezier(0.2, 0, 0.2, 1);

	/* Z-index scale */
	--gvx-z-raised: 10;
	--gvx-z-header: 900;
	--gvx-z-overlay: 1000;

	/* Reserved sticky-header metrics.
	   Consumed by the approved sticky header/search in the header phase;
	   defined here so scroll offsets and layout math share one source. */
	--gvx-header-h-desktop: 72px;
	--gvx-header-row-h-mobile: 56px;
	--gvx-search-row-h-mobile: 56px;
	--gvx-header-h-mobile: calc(var(--gvx-header-row-h-mobile) + var(--gvx-search-row-h-mobile));

	/* Reserved mobile bottom-chrome metrics.
	   --gvx-bottom-nav-h is the height body.gvx-has-bottom-nav reserves for
	   the fixed bottom navigation. Anything anchored above that bar offsets
	   from this one value instead of repeating a literal, so changing the
	   bar's height moves everything with it.
	   --gvx-product-cta-h is a first-paint fallback only: the real CTA
	   height depends on wrapped and localized button text, so product.js
	   republishes the measured value onto the same property. */
	--gvx-bottom-nav-h: 64px;
	--gvx-product-cta-h: 96px;

	/* Phase E12T. The product CTA's distance from the viewport bottom.
	   It is deliberately NOT conditional on the bottom navigation: that band
	   is occupied on every Product Page by third-party fixed launchers
	   (Click-to-Chat, Support AI, Astra scroll-to-top), two of which carry
	   z-index in the tens of millions. Dropping the CTA flush would put its
	   right-hand controls underneath them, so the offset stands whether or
	   not the navigation renders. */
	--gvx-product-cta-offset: var(--gvx-bottom-nav-h);

	/* Breathing room between the last page content and the CTA's top edge. */
	--gvx-product-cta-gap: 12px;

	/* THE authoritative occupied band. The CTA's position and the Product
	   Page's bottom reserve both derive from this single expression — the
	   E12 rollback happened because they were computed separately and only
	   agreed when body.gvx-has-bottom-nav was present, which never happens
	   on a Product Page, leaving the footer under-reserved by exactly the
	   offset. Anything that changes the CTA's geometry must change it here. */
	--gvx-product-cta-band: calc(
		var(--gvx-product-cta-h)
		+ var(--gvx-product-cta-offset)
		+ var(--gvx-product-cta-gap)
		+ env(safe-area-inset-bottom, 0px)
	);
}

@media (min-width: 768px) {
	:root {
		--gvx-container-pad: 1.5rem;
		--gvx-section-pad: 4.5rem;
		--gvx-text-xl: 1.75rem;
		--gvx-text-2xl: 2rem;
		--gvx-text-display: 2.5rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--gvx-container-pad: 2rem;
		--gvx-section-pad: 5rem;
		--gvx-text-display: 3rem;
	}
}