/**
 * Paramaribo Collection - Design tokens
 *
 * Single source of truth for the editorial redesign. Every value the new
 * templates use resolves to a variable declared here, so the whole look can be
 * retuned from one file.
 *
 * House rules encoded here: no radii, no shadows, no gradients.
 */

:root {
	/* ---- Colour ------------------------------------------------------- */
	--pc-white: #ffffff;
	--pc-bg: #ffffff;
	--pc-bg-alt: #f7f6f4; /* off-white, for alternating editorial bands */
	--pc-bg-sunken: #efedea; /* image placeholders, disabled fields */

	--pc-ink: #1a1a1a; /* body copy, headings */
	--pc-ink-soft: #5c5c5c; /* secondary copy */
	--pc-ink-muted: #8c8c8c; /* meta, captions, placeholder text */

	--pc-line: #e3e1de; /* hairlines, field borders */
	--pc-line-strong: #1a1a1a; /* active/focus borders */

	--pc-accent: #1a1a1a; /* buttons; deliberately not a colour */
	--pc-accent-ink: #ffffff;
	--pc-sale: #9b2c2c; /* the only chromatic accent: sale price */

	--pc-focus: #1a1a1a;

	/* ---- Typography --------------------------------------------------- */
	--pc-font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;

	--pc-fs-xs: 0.75rem; /* 12px - nav, labels, meta */
	--pc-fs-sm: 0.875rem; /* 14px - product card, small UI */
	--pc-fs-base: 1rem; /* 16px - body */
	--pc-fs-md: 1.125rem; /* 18px */
	--pc-fs-lg: 1.5rem; /* 24px - section headings */
	--pc-fs-xl: 2.25rem; /* 36px */
	--pc-fs-2xl: 3.25rem; /* 52px - hero */
	--pc-fs-3xl: 4.75rem; /* 76px - hero, desktop */

	--pc-lh-tight: 1.1;
	--pc-lh-snug: 1.35;
	--pc-lh-base: 1.6;

	/* Wide tracking is the signature of the look. */
	--pc-track-nav: 0.12em;
	--pc-track-head: 0.08em;
	--pc-track-hero: 0.02em;
	--pc-track-body: 0.01em;

	--pc-fw-regular: 400;
	--pc-fw-medium: 500;
	--pc-fw-bold: 700;

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

	/* ---- Layout ------------------------------------------------------- */
	--pc-gutter: 1rem;
	--pc-max: 1680px; /* wide editorial container */
	--pc-max-text: 680px; /* readable prose measure */
	--pc-header-h: 60px;

	/* The existing catalogue is shot square (1500x1500), so product frames are
	   1:1 to avoid cropping garments. Change this one value to 3/4 if the
	   catalogue is ever rephotographed portrait; nothing else needs editing. */
	--pc-ratio-product: 1 / 1;
	--pc-ratio-hero: 16 / 9;
	--pc-ratio-category: 4 / 5;

	--pc-grid-gap: 2px; /* near-flush grid, H&M style */

	/* ---- Motion ------------------------------------------------------- */
	--pc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--pc-dur-fast: 120ms;
	--pc-dur: 240ms;
	--pc-dur-slow: 600ms;

	/* ---- Non-negotiables ---------------------------------------------- */
	--pc-radius: 0;
	--pc-shadow: none;

	--pc-z-header: 100;
	--pc-z-menu: 200;
	--pc-z-overlay: 300;
}

@media (min-width: 768px) {
	:root {
		--pc-gutter: 2rem;
		--pc-header-h: 72px;
	}
}

@media (min-width: 1200px) {
	:root {
		--pc-gutter: 3rem;
	}
}