/* ==========================================================================
   Kaia Peptides — design tokens
   Every value here was measured off kaiapeptides.com with getComputedStyle
   (see ../../../reference/design-tokens.md). No component file may hardcode
   a colour, font or radius — reference these variables instead.
   ========================================================================== */

:root {
	/* --- Brand & neutrals ------------------------------------------------
	   Sampled from the live site's rendered pixels, not from computed styles:
	   the stylesheet carries plenty of unused plugin defaults. */
	--c-ink: #0c0c0c;            /* headings */
	--c-body: #333333;           /* body copy */
	--c-black: #000000;
	--c-white: #ffffff;
	--c-surface: #ffffff;        /* default page background */
	--c-surface-alt: #f3f3f3;    /* light band (product rows) */
	--c-surface-muted: #f0f0f0;

	--c-green: #8eeda0;          /* primary button fill */
	--c-green-hover: #74e089;
	--c-green-ink: #10381b;      /* text on the green fill */
	--c-green-deep: #375e3f;     /* announcement bar */
	--c-green-badge: #2e7d32;    /* IN STOCK badge */
	--c-green-cart: #2a4730;     /* header cart pill */

	--c-cart-badge: #3898ec;  /* the numeral in the live header badge */
	--c-dark: #2d2d2d;           /* dark content band */
	--c-dark-2: #1f2124;
	--c-dark-3: #545454;
	--c-footer: #242424;

	--c-header-overlay: rgba(12, 12, 12, 0.5); /* header sits over the page */

	--c-accent: var(--c-green-deep);
	--c-accent-ink: var(--c-white);
	--c-muted: #69727d;
	--c-muted-2: #666666;
	--c-line: #d5d8dc;
	--c-line-soft: #eeeeee;
	--c-success: #2e7d32;
	--c-overlay: rgba(12, 12, 12, 0.5);

	/* --- Type ------------------------------------------------------------ */
	--f-display: "Marble", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fs-h1: clamp(2.25rem, 1.35rem + 3.2vw, 3.5rem);   /* 36 -> 56 */
	--fs-h2: clamp(1.75rem, 1.05rem + 2.4vw, 3rem);     /* 28 -> 48 */
	--fs-h3: clamp(1.375rem, 1.05rem + 1.1vw, 1.75rem); /* 22 -> 28 */
	--fs-h4: 1.375rem;   /* 22 */
	--fs-h5: 1.125rem;   /* 18 */
	--fs-h6: 1rem;       /* 16 */
	--fs-lead: 1.25rem;  /* 20 */
	--fs-body: 1rem;     /* 16 */
	--fs-sm: 0.9375rem;  /* 15 */
	--fs-xs: 0.875rem;   /* 14 */
	--fs-2xs: 0.75rem;   /* 12 */

	--lh-tight: 1;
	--lh-heading: 1.36;
	--lh-body: 1.5;
	--lh-loose: 1.6;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--ls-tight: -0.01em;
	--ls-eyebrow: 0.14em;

	/* --- Layout ---------------------------------------------------------- */
	/* Notice marker, standing in for WooCommerce's own icon font. */
	--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 3.4a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2zM9.4 12H6.6v-1h.7V7.9h-.7v-1h2.1V11h.7v1z'/%3E%3C/svg%3E");
	--container: 1520px;       /* measured container max-width */
	--container-narrow: 1140px;
	--container-text: 820px;
	--gutter: 20px;
	--gutter-lg: 40px;

	/* Section rhythm. Live runs 80/50; the site reads cramped at that on a wide
	   screen, so the desktop band is 96 and the phone band 64 — one rhythm,
	   used by every section on every page. */
	--section-y: 96px;
	--section-y-sm: 64px;
	--header-h: 54px;
	--topbar-h: 44px;

	/* --- Spacing scale --------------------------------------------------- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 40px;
	--s-8: 48px;
	--s-9: 64px;
	--s-10: 80px;
	--s-11: 104px;

	/* --- Shape & motion -------------------------------------------------- */
	--r-xs: 3px;
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--r-xl: 24px;
	--r-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(12, 12, 12, 0.06), 0 1px 3px rgba(12, 12, 12, 0.08);
	--shadow-md: 0 4px 12px rgba(12, 12, 12, 0.08);
	--shadow-lg: 0 18px 40px rgba(12, 12, 12, 0.12);

	--t-fast: 0.15s ease;
	--t-base: 0.3s ease;
	--t-slow: 0.45s cubic-bezier(0.22, 1, 0.36, 1);

	/* One easing curve for entrances and UI moves, one for exits. */
	--e-out: cubic-bezier(0.22, 1, 0.36, 1);
	--e-in: cubic-bezier(0.55, 0, 1, 0.45);

	/* --- Surfaces & fields ------------------------------------------------
	   Every raised panel on the site — product card, trust card, cart card,
	   checkout card — uses one padding, one radius and one shadow, and every
	   single-line field one height and one shape. */
	--card-pad: var(--s-5);
	--card-pad-lg: var(--s-6);
	--card-radius: var(--r-md);
	--card-shadow: var(--shadow-md);

	--field-h: 48px;
	--field-pad-y: 13px;
	--field-pad-x: 18px;
	--field-bg: #f7f8f9;
	--field-bg-focus: var(--c-white);

	--z-header: 100;
	--z-drawer: 200;
	--z-overlay: 190;
}

/* Breakpoints, for reference — these are Elementor's STOCK values, confirmed
   from the live site's elementorFrontendConfig (no custom breakpoints are
   enabled): mobile <=767, tablet <=1024. CSS below is mobile-first, so the
   min-width mirrors are 768px and 1025px. Small phones break at 480px. */

@media (min-width: 1025px) {
	:root {
		/* Measured off the live layout: content starts ~80px from the edge. */
		--gutter: 80px;
	}
}