/**
 * PhotoCab design tokens.
 *
 * Values are transcribed from the Claude Design prototype
 * ("PhotoCab Homepage (offline).html", :root block) so that the prototype
 * stays the single source of truth for the visual language.
 *
 * NOTE: the original intent was to reference --theme-palette-color-* for
 * anything the Blocksy palette can hold. That mapping is not done here
 * because the Customizer palette slots have not been aligned with these
 * values yet - see the comment at the bottom of this file.
 */

:root {
	/* ---- Type scale ---- */
	--pc-font: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
	--pc-fs-h1: 44px;
	--pc-fs-h1-pdp: 32px;
	--pc-fs-h2: 28px;
	--pc-fs-h3: 20px;
	--pc-fs-tile-lg: 22px;
	--pc-fs-body: 16px;
	--pc-fs-tile-sm: 16px;
	/* NOTE: every prototype declares 15px here; 16px is a known drift.
	   assets/css/checkout.css pins its fields to 15px rather than move
	   prices across the cart, product cards and the product page. */
	--pc-fs-price: 16px;
	--pc-fs-btn: 14px;
	--pc-fs-card: 13px;
	--pc-fs-old: 12px;
	--pc-fs-label: 11px;

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

	--pc-lh-tight: 1.1;
	--pc-lh-heading: 1.15;
	--pc-lh-title: 1.3;
	--pc-lh-card: 1.35;
	--pc-lh-body: 1.6;

	--pc-ls-h1: -0.02em;
	--pc-ls-heading: -0.01em;
	--pc-ls-label: 0.01em;

	/* ---- Ink ---- */
	--pc-ink-900: #1f1e1c;
	--pc-ink-700: #3a3833;
	--pc-ink-600: #5f5c57;
	--pc-ink-400: #8e8a83;

	/* ---- Surfaces ---- */
	--pc-surface: #ffffff;
	--pc-surface-2: #f7f5f0;
	--pc-page: #fdfbf7;
	--pc-border: #e6e2d9;

	/* ---- Accent ---- */
	--pc-accent-100: #faeeda;
	--pc-accent-400: #ef9f27;
	--pc-accent-500: #ba7517;
	--pc-accent-600: #854f0b;
	--pc-accent-700: #5c3607;

	/* ---- Category tiles ---- */
	--pc-cat-gift: #faece7;
	--pc-cat-instax: #e1f5ee;
	--pc-cat-kodak: #fdf3e0;
	--pc-cat-case: #f1efe8;
	--pc-cat-camera: #eeedfe;
	--pc-cat-film: #e6f1fb;
	--pc-cat-gift-fg: #4a1b0c;
	--pc-cat-instax-fg: #04342c;
	--pc-cat-kodak-fg: #412402;
	--pc-cat-case-fg: #2c2c2a;
	--pc-cat-camera-fg: #26215c;
	--pc-cat-film-fg: #042c53;

	/* ---- Product colour swatches ---- */
	--pc-sw-white: #f2efe9;
	--pc-sw-lilac: #c9b7de;
	--pc-sw-pink: #f3c9ce;
	--pc-sw-blue: #b9d3e8;
	--pc-sw-mint: #bfdccb;
	--pc-sw-green: #9fb89a;
	--pc-sw-terra: #d98a5b;
	--pc-sw-brown: #8c6a4e;
	--pc-sw-black: #2b2a28;
	--pc-sw-yellow: #e5c15c;
	--pc-sw-teal: #7ec5be;
	--pc-sw-sand: #dfcdb4;

	/* ---- Spacing ---- */
	--pc-space-1: 4px;
	--pc-space-2: 8px;
	--pc-space-3: 12px;
	--pc-space-4: 16px;
	--pc-space-5: 20px;
	--pc-space-6: 24px;
	--pc-space-8: 32px;
	--pc-space-14: 56px;
	--pc-space-20: 80px;

	/* ---- Colour swatches ---- */
	/* Ideal size, and the smallest one still worth tapping. Cards shrink the
	   swatches between these two so a row of six never wraps. */
	--pc-swatch-size: 32px;
	--pc-swatch-min: 18px;

	/* Smallest a photo-paper chip may get squeezed to. */
	--pc-chip-min: 24px;

	/* ---- Radii ---- */
	--pc-radius-ctl: 8px;
	--pc-radius-card: 12px;
	--pc-radius-frame: 2px;

	/* ---- Success (added-to-cart popup) ---- */
	--pc-ok-100: #e1f5ee;
	--pc-ok-600: #1f6b54;

	/* ---- Elevation ---- */
	--pc-shadow-frame: 0 8px 20px rgba(31, 30, 28, 0.12);
	--pc-shadow-pop: 0 18px 48px rgba(31, 30, 28, 0.22), 0 2px 8px rgba(31, 30, 28, 0.08);
	--pc-shadow-tip: 0 6px 16px rgba(31, 30, 28, 0.18);
	--pc-shadow-panel: -12px 0 32px rgba(31, 30, 28, 0.16);

	/* ---- Motion ---- */
	--pc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pc-dur-fast: 180ms;
	--pc-dur-base: 250ms;
	--pc-dur-slow: 460ms;
}

/* Tablet: the prototype's breakpoint, not Blocksy's. */
@media (max-width: 999px) {
	:root {
		--pc-fs-h1: 36px;
		--pc-fs-h1-pdp: 28px;
		--pc-fs-h2: 26px;
		--pc-fs-h3: 18px;
		--pc-space-20: 64px;
	}
}

@media (max-width: 689px) {
	:root {
		--pc-fs-h1: 26px;
		--pc-fs-h1-pdp: 22px;
		--pc-fs-h2: 22px;
		--pc-fs-h3: 18px;
		--pc-fs-tile-lg: 18px;
		--pc-fs-tile-sm: 15px;
		--pc-fs-body: 15px;
		--pc-fs-price: 14px;
		--pc-fs-btn: 13px;
		--pc-fs-card: 12px;
		--pc-fs-old: 11px;
		--pc-space-20: 48px;
	}
}

/*
 * TODO: once the Blocksy palette slots are set to these values, swap the
 * literals above for --theme-palette-color-* references so the Customizer
 * drives them. Existing overrides in style.css already assume:
 *   color-1  = accent, color-5 = border, color-8 = surface-2.
 */