/**
 * PackPlus V2 — Design Tokens
 *
 * Central source of truth for color, spacing, and layer values. Every
 * other stylesheet references these custom properties rather than
 * hardcoding values.
 *
 * Sprint 3R replaces the placeholder orange brand system with the real
 * PackPlus identity, sampled directly from the official logo
 * (packplusprinting.com/wp-content/uploads/2016/11/Pack_Plus_Logo_FINAL-1-1-3.png,
 * dominant fill rgb(109,197,8)). Color balance across the homepage
 * targets ~70% white/paper/neutral, ~20% ink, ~10% green — green is a
 * controlled brand signal, not a section-filling color.
 */

:root {
	/* Color — brand */
	--pp-green: #6dc508;       /* sampled from the real PackPlus logo */
	--pp-green-dark: color-mix(in srgb, var(--pp-green) 62%, black); /* hover/pressed states, darker text-safe tint */
	--pp-green-tint: color-mix(in srgb, var(--pp-green) 14%, white); /* rare, very light wash */

	/* Color — neutrals */
	--pp-ink: #111111;
	--pp-black: #000000;       /* pure black, technical use only */
	--pp-paper: #f7f7f2;       /* primary warm off-white surface */
	--pp-white: #ffffff;
	--pp-grey: #e8e8e2;        /* secondary neutral surface for alternating sections */
	--pp-muted: #6d6d68;       /* muted body text on paper/white */

	/* Color — semantic roles */
	--pp-bg: var(--pp-paper);
	--pp-bg-neutral: var(--pp-grey);
	--pp-bg-ink: var(--pp-ink);
	--pp-text: var(--pp-ink);
	--pp-text-muted: var(--pp-muted);
	--pp-text-on-dark: var(--pp-white);
	--pp-text-on-green: var(--pp-ink); /* WCAG AA: black-on-green passes, white-on-green does not at this hue */

	--pp-line: color-mix(in srgb, var(--pp-ink) 12%, transparent);
	--pp-line-on-dark: color-mix(in srgb, var(--pp-white) 16%, transparent);

	/* Layout */
	--pp-gutter: clamp(1.25rem, 4vw, 3rem);
	--pp-nav-height: 84px;
	--pp-nav-height-compact: 64px;
	--pp-max-content: 78rem;
	--pp-max-wide: 96rem;
	--pp-copy-max: 42ch;
	--pp-section-pad: clamp(4rem, 9vw, 7rem);

	/*
	 * Spacing scale. --pp-space-md/lg/xl are load-bearing — each
	 * matches a spacing rhythm repeated across multiple section
	 * stylesheets (collage/gallery gaps, section-content top margins)
	 * so those repeats reference one token instead of restating the
	 * same clamp() independently. --pp-space-xs/sm/2xl round out the
	 * scale for future spacing decisions, mirroring how the motion
	 * tokens below were centralized ahead of full use.
	 */
	--pp-space-xs: clamp(0.5rem, 1vw, 0.75rem);
	--pp-space-sm: clamp(1rem, 2vw, 1.5rem);
	--pp-space-md: clamp(1.5rem, 3vw, 2.5rem);
	--pp-space-lg: clamp(2rem, 5vw, 4rem);
	--pp-space-xl: clamp(3rem, 6vw, 5rem);
	--pp-space-2xl: clamp(5rem, 9vw, 8rem);

	/* Z-index layers */
	--pp-z-loader: 100;
	--pp-z-nav: 80;
	--pp-z-content: 10;
	--pp-z-media: 1;

	/* Motion */
	--pp-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
	--pp-duration-fast: 0.2s;
	--pp-duration-medium: 0.5s;
	--pp-duration-slow: 1s;
}