/**
 * Peptogenesis V2 — design tokens.
 *
 * The single source of every colour, type, spacing, radius, shadow and motion
 * value used by the theme. theme.json emits the WordPress presets; this file
 * defines the --pg-* system the components consume and maps the presets onto
 * it so the Site Editor and the front end agree.
 *
 * Rules:
 *   1. No literal colour, size or duration outside this file.
 *   2. A token is never repointed per surface. Surfaces choose from the
 *      "on-dark" and "on-light" groups instead (see palette-token-trap).
 *   3. Mobile-first. Breakpoints: 480 / 782 / 1024 / 1280 / 1440.
 */

:root {
	/* ------------------------------------------------------------------ */
	/* Colour — navy foundation                                             */
	/* ------------------------------------------------------------------ */
	--pg-navy-950: #04091A;   /* deepest: header, footer, entry gate      */
	--pg-navy-900: #070F22;   /* page ground                              */
	--pg-navy-850: #0A1530;   /* section ground alt                        */
	--pg-navy-800: #0F1D3B;   /* raised surface: cards on dark            */
	--pg-navy-700: #172A50;   /* hover surface / strong border on dark    */
	--pg-navy-600: #213A6A;   /* accents, chart lines                     */
	--pg-blue-400: #4F7BD9;   /* cool light accent (glow, focus on dark)  */

	/* Light surfaces */
	--pg-white: #FFFFFF;
	--pg-offwhite: #F4F6F9;   /* primary light section ground (cool)      */
	--pg-offwhite-2: #EAEEF4; /* light section alt / inset                 */
	--pg-ivory: #F7F4EC;      /* selective warm surface, use sparingly    */

	/* Cool grays */
	--pg-gray-100: #E6EBF2;
	--pg-gray-200: #D3DAE5;
	--pg-gray-300: #B5BFCF;
	--pg-gray-400: #8B98AC;
	--pg-gray-500: #66758C;
	--pg-gray-600: #4A5870;
	--pg-gray-700: #33405A;

	/* Ink (text on light) */
	--pg-ink: #0A1226;
	--pg-ink-2: #3B4863;
	--pg-ink-3: #5E6C84;

	/* Text on dark */
	--pg-text-hi: #F4F6FA;
	--pg-text-mid: #C3CCDB;
	--pg-text-low: #8B98AC;

	/* Gold — one hue family, brand gold at 500 */
	--pg-gold-200: #F3E4B0;
	--pg-gold-300: #E8D28C;
	--pg-gold-400: #DDC26A;
	--pg-gold-500: #D4AF37;   /* brand (logo P)                            */
	--pg-gold-600: #B4922B;
	--pg-gold-700: #7F651B;   /* gold as TEXT on light surfaces (5.0:1 on off-white) */
	--pg-gold-800: #5F4B14;
	--pg-gold-metal: linear-gradient(155deg, #EFD98F 0%, #D4AF37 42%, #B8922C 78%, #D4B75A 100%);
	--pg-gold-metal-hover: linear-gradient(155deg, #F5E3A2 0%, #DDBB48 42%, #C29B33 78%, #DEC36A 100%);
	--pg-gold-line: rgba(212, 175, 55, 0.35);
	--pg-gold-line-strong: rgba(212, 175, 55, 0.6);
	--pg-gold-glow: rgba(212, 175, 55, 0.16);

	/* Semantic — dark surface / light surface pairs */
	--pg-success: #3DB876;      --pg-success-ink: #1B6E44;   --pg-success-bg: #E6F6EC;
	--pg-warning: #E7B23A;      --pg-warning-ink: #7A5200;   --pg-warning-bg: #FCF3DC;
	--pg-error:   #F27272;      --pg-error-ink:   #B3261E;   --pg-error-bg:   #FBE9E7;
	--pg-info:    #6EA3FF;      --pg-info-ink:    #1F5FBF;   --pg-info-bg:    #E8F0FE;

	/* Lines */
	--pg-line-dark: rgba(255, 255, 255, 0.08);
	--pg-line-dark-strong: rgba(255, 255, 255, 0.16);
	--pg-line-light: #DDE3EC;
	--pg-line-light-strong: #C4CDDA;

	/* Overlays */
	--pg-scrim: rgba(4, 9, 26, 0.72);
	--pg-glass-dark: rgba(15, 29, 59, 0.55);
	--pg-glass-light: rgba(255, 255, 255, 0.72);

	/* ------------------------------------------------------------------ */
	/* Typography                                                           */
	/* ------------------------------------------------------------------ */
	--pg-font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pg-font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pg-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--pg-fs-display: clamp(3rem, 1.9rem + 4.6vw, 5.75rem);
	--pg-fs-h1: clamp(2.25rem, 1.55rem + 2.9vw, 4rem);
	--pg-fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
	--pg-fs-h3: clamp(1.3rem, 1.12rem + 0.75vw, 1.7rem);
	--pg-fs-h4: 1.125rem;
	--pg-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--pg-fs-body: 1rem;
	--pg-fs-sm: 0.875rem;
	--pg-fs-xs: 0.8125rem;
	--pg-fs-micro: 0.75rem;
	--pg-fs-nano: 0.6875rem;

	--pg-lh-tight: 1.05;
	--pg-lh-snug: 1.2;
	--pg-lh-normal: 1.55;
	--pg-lh-relaxed: 1.7;

	--pg-ls-display: -0.03em;
	--pg-ls-heading: -0.02em;
	--pg-ls-caps: 0.14em;
	--pg-ls-caps-wide: 0.22em;

	--pg-fw-regular: 400;
	--pg-fw-medium: 500;
	--pg-fw-semibold: 600;
	--pg-fw-bold: 700;
	--pg-fw-extrabold: 800;

	/* ------------------------------------------------------------------ */
	/* Spacing — 4px base                                                   */
	/* ------------------------------------------------------------------ */
	--pg-s-1: 0.25rem;
	--pg-s-2: 0.5rem;
	--pg-s-3: 0.75rem;
	--pg-s-4: 1rem;
	--pg-s-5: 1.25rem;
	--pg-s-6: 1.5rem;
	--pg-s-8: 2rem;
	--pg-s-10: 2.5rem;
	--pg-s-12: 3rem;
	--pg-s-16: 4rem;
	--pg-s-20: 5rem;
	--pg-s-24: 6rem;

	--pg-section: clamp(4rem, 2.8rem + 5vw, 8rem);
	--pg-section-sm: clamp(2.5rem, 1.8rem + 3vw, 5rem);
	--pg-gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3rem);
	--pg-container: 1360px;
	--pg-container-wide: 1560px;
	--pg-container-narrow: 820px;
	--pg-container-text: 700px;

	/* ------------------------------------------------------------------ */
	/* Shape                                                                */
	/* ------------------------------------------------------------------ */
	--pg-r-xs: 4px;
	--pg-r-sm: 8px;
	--pg-r-md: 12px;
	--pg-r-lg: 18px;
	--pg-r-xl: 26px;
	--pg-r-pill: 999px;

	/* ------------------------------------------------------------------ */
	/* Elevation (cool-tinted, never gold except the hero glow)             */
	/* ------------------------------------------------------------------ */
	--pg-shadow-1: 0 1px 2px rgba(4, 9, 26, 0.12), 0 2px 8px rgba(4, 9, 26, 0.08);
	--pg-shadow-2: 0 4px 14px rgba(4, 9, 26, 0.14), 0 12px 32px rgba(4, 9, 26, 0.12);
	--pg-shadow-3: 0 12px 32px rgba(4, 9, 26, 0.22), 0 32px 72px rgba(4, 9, 26, 0.26);
	--pg-shadow-dark-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.35);
	--pg-shadow-dark-2: 0 10px 30px rgba(0, 0, 0, 0.45), 0 30px 70px rgba(0, 0, 0, 0.4);
	--pg-shadow-gold: 0 0 0 1px var(--pg-gold-line), 0 10px 30px rgba(212, 175, 55, 0.14);

	/* Studio stage — LOCKED STANDARD (owner, 2026-09-16; docs/v2/02-design-system.md §6). Do not restyle per placement.
	   The ONE photographic setup behind every product render outside the hero, like a seamless sweep in a
	   studio: deep navy, a broad even wash of soft light from above (no visible spot, no vignette), darker toward the
	   floor; the render's own glass highlights do the rest. Shadow: only a tight, natural contact shadow under the base
	   (the ellipse), plus a hairline of grounding on the render itself. No gold, no scene, no texture. Used by product
	   cards, the product-page stage, category tiles, library rows, cart rows, the header feature and the About art.   */
	--pg-studio: radial-gradient(110% 70% at 50% 0%, rgba(198, 210, 238, 0.085) 0%, rgba(198, 210, 238, 0) 70%), linear-gradient(180deg, var(--pg-navy-800) 0%, var(--pg-navy-900) 62%, var(--pg-navy-950) 100%);
	--pg-studio-shadow: radial-gradient(ellipse at 50% 50%, rgba(4, 9, 26, 0.66) 0%, rgba(4, 9, 26, 0.24) 46%, rgba(4, 9, 26, 0) 72%);
	--pg-studio-drop-sm: drop-shadow(0 1px 1px rgba(4, 9, 26, 0.3));
	--pg-studio-drop: drop-shadow(0 2px 3px rgba(4, 9, 26, 0.32));
	--pg-studio-drop-lg: drop-shadow(0 3px 5px rgba(4, 9, 26, 0.32));
	/* Light studio surface for PRODUCT CARDS (owner, 2026-09-19): a white cyclorama that darkens toward the floor, a soft
	   contact shadow, a mirror-like reflection under the vial. The navy studio sweep above stays for every other placement. */
	--pg-studio-light: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 38%, #EFF2F7 74%, #E5EAF1 100%);
	--pg-studio-light-floor: radial-gradient(62% 90% at 50% 100%, rgba(20, 26, 43, 0.10) 0%, rgba(20, 26, 43, 0.035) 48%, rgba(20, 26, 43, 0) 76%);
	--pg-studio-light-shadow: radial-gradient(ellipse at 50% 50%, rgba(20, 26, 43, 0.36) 0%, rgba(20, 26, 43, 0.13) 44%, rgba(20, 26, 43, 0) 70%);
	--pg-studio-light-drop: drop-shadow(0 2px 3px rgba(20, 26, 43, 0.16));
	--pg-studio-light-reflect: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.10) 12%, rgba(0, 0, 0, 0) 30%);
	/* Plain white counter for product cards (owner, 2026-09-19): white backdrop, a barely-shaded white surface from the horizon down */
	--pg-studio-white: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #F5F6F8 64%, #EEF0F3 100%);
	--pg-studio-white-ambient: radial-gradient(ellipse at 50% 50%, rgba(20, 26, 43, 0.24) 0%, rgba(20, 26, 43, 0.09) 44%, rgba(20, 26, 43, 0) 72%);
	--pg-studio-white-contact: radial-gradient(ellipse at 50% 50%, rgba(20, 26, 43, 0.58) 0%, rgba(20, 26, 43, 0.26) 40%, rgba(20, 26, 43, 0) 70%);

	/* ------------------------------------------------------------------ */
	/* Motion                                                               */
	/* ------------------------------------------------------------------ */
	--pg-d-fast: 150ms;
	--pg-d-base: 260ms;
	--pg-d-slow: 420ms;
	--pg-d-cine: 800ms;
	--pg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--pg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--pg-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

	/* ------------------------------------------------------------------ */
	/* Layout constants                                                     */
	/* ------------------------------------------------------------------ */
	--pg-header-h: 72px;
	--pg-header-h-mobile: 60px;
	--pg-touch: 44px;
	--pg-z-header: 100;
	--pg-z-drawer: 700;
	--pg-z-modal: 800;
	--pg-z-gate: 1000;

	/* Legacy aliases kept for older rules while they are retired. */
	--pg-gold: var(--pg-gold-500);
	--pg-gold-hi: var(--pg-gold-300);
	--pg-gold-dark: var(--pg-gold-600);
	--pg-duration-fast: var(--pg-d-fast);
	--pg-duration-base: var(--pg-d-base);
	--pg-duration-slow: var(--pg-d-slow);
	--pg-easing: var(--pg-ease-out);
}

/*
 * Surface contexts. A surface sets the semantic slots every component reads;
 * components never pick a raw colour by surface themselves.
 */
:root,
.pg-surface-dark {
	--pg-bg: var(--pg-navy-900);
	--pg-bg-raised: var(--pg-navy-800);
	--pg-bg-inset: var(--pg-navy-950);
	--pg-fg: var(--pg-text-hi);
	--pg-fg-2: var(--pg-text-mid);
	--pg-fg-3: var(--pg-text-low);
	--pg-line: var(--pg-line-dark);
	--pg-line-strong: var(--pg-line-dark-strong);
	--pg-accent: var(--pg-gold-500);
	--pg-accent-fg: var(--pg-gold-400);
	--pg-link: var(--pg-gold-400);
	--pg-link-hover: var(--pg-gold-300);
	--pg-focus: var(--pg-gold-400);
	--pg-field-bg: rgba(255, 255, 255, 0.04);
	--pg-field-line: var(--pg-line-dark-strong);
	--pg-field-fg: var(--pg-text-hi);
	--pg-placeholder: var(--pg-text-low);
	--pg-shadow: var(--pg-shadow-dark-1);
	--pg-shadow-lg: var(--pg-shadow-dark-2);
	--pg-ok: var(--pg-success);
	--pg-warn: var(--pg-warning);
	--pg-err: var(--pg-error);
	--pg-inf: var(--pg-info);
	color-scheme: dark;
}

.pg-surface-light, .pg-quick__panel, .pg-modal__panel, .pg-pay-dialog__panel {   /* .pg-drawer left this list on 2026-09-20: the cart drawer sits on the navy ground like the product page */   /* .pg-buy and .pg-sticky-buy left this list on 2026-09-20: the product page buy column sits on the navy ground (reference layout) */
	--pg-bg: var(--pg-offwhite);
	--pg-bg-raised: var(--pg-white);
	--pg-bg-inset: var(--pg-offwhite-2);
	--pg-fg: var(--pg-ink);
	--pg-fg-2: var(--pg-ink-2);
	--pg-fg-3: var(--pg-ink-3);
	--pg-line: var(--pg-line-light);
	--pg-line-strong: var(--pg-line-light-strong);
	--pg-accent: var(--pg-gold-500);
	--pg-accent-fg: var(--pg-gold-700);
	--pg-link: var(--pg-gold-700);
	--pg-link-hover: var(--pg-gold-800);
	--pg-focus: var(--pg-navy-700);
	--pg-field-bg: var(--pg-white);
	--pg-field-line: var(--pg-line-light-strong);
	--pg-field-fg: var(--pg-ink);
	--pg-placeholder: var(--pg-gray-400);
	--pg-shadow: var(--pg-shadow-1);
	--pg-shadow-lg: var(--pg-shadow-2);
	--pg-ok: var(--pg-success-ink);
	--pg-warn: var(--pg-warning-ink);
	--pg-err: var(--pg-error-ink);
	--pg-inf: var(--pg-info-ink);
	color-scheme: light;
}

.pg-surface-white {
	--pg-bg: var(--pg-white);
	--pg-bg-raised: var(--pg-white);
	--pg-bg-inset: var(--pg-offwhite);
}

/* Map the WordPress presets onto the system so blocks placed in the editor match. */
:root {
	--wp--preset--color--navy: var(--pg-navy-900);
	--wp--preset--color--navy-deep: var(--pg-navy-950);
	--wp--preset--color--navy-raised: var(--pg-navy-800);
	--wp--preset--color--gold: var(--pg-gold-500);
	--wp--preset--color--gold-ink: var(--pg-gold-700);
	--wp--preset--color--white: var(--pg-white);
	--wp--preset--color--offwhite: var(--pg-offwhite);
	--wp--preset--color--ivory: var(--pg-ivory);
	--wp--preset--color--ink: var(--pg-ink);
	--wp--preset--color--gray: var(--pg-gray-400);
	--wp--preset--color--success: var(--pg-success);
}