/* ==========================================================================
   Peptide Strips — design tokens (classic theme)
   --------------------------------------------------------------------------
   Source of truth for colors, type, spacing. In the block-theme prototype
   these lived in theme.json presets (--wp--preset--*); a classic theme has no
   theme.json, so the raw values are declared here directly. Values mirror
   design/tokens.json → theme.json palette exactly (surface-dark = #0B1928).
   Loaded before main.css (which consumes every var below).
   ========================================================================== */

/* Self-hosted Aeonik — no CDN requests from the theme. */
@font-face {
	font-family: 'Aeonik';
	src: url('../fonts/aeonik-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Aeonik';
	src: url('../fonts/aeonik-regular-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Aeonik';
	src: url('../fonts/aeonik-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Aeonik';
	src: url('../fonts/aeonik-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Aeonik';
	src: url('../fonts/aeonik-bold-italic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root {
	/* ---- Color ---- */
	--ps-blue: #0076B8;
	--ps-blue-deep: #005A8C;
	--ps-navy: #163250;
	--ps-ink: #292B32;
	--ps-muted: #808597;
	--ps-soft: #9CA0AE;
	--ps-paper: #FFFFFF;
	--ps-dark: #0B1928;
	--ps-wash: #F8FBFC;
	--ps-field: #FAFAFA;
	--ps-lilac: #F3F4FC;
	--ps-chip: #D3E8F5;
	--ps-line: #E3E8EF;
	--ps-line-2: #BFC7D2;
	--ps-pale: #EFF8FB;
	/* The flat fill Figma baked behind the Standard artwork (1640:1513). The
	   exports are opaque, and keying it out is not an option — the subjects are
	   a white film strip, a white factory and a foil pouch, so any colour key
	   eats them. Matching the card to it is what the Figma itself does: frame
	   and card share one wash, so no rectangle is ever visible. */
	--ps-art-bg: #F9FCFC;
	--ps-accent-sky: #7CC1EC;  /* light-blue accent on dark chrome (ticker/manifest band) */
	--ps-ok: #1B7F4E;          /* stock-status green — the ONLY green in the system */
	--ps-ok-bg: #E4F3EA;
	--ps-err: #9A3B33;
	--ps-err-bg: #F6E7E5;

	/* ---- Type ---- */
	--ps-font: 'Aeonik', 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
	/* Aeonik ships 400 / 500 / 700 ONLY. Any other weight silently resolves to
	   700 — declare nothing outside these three. */
	--ps-t-2xs: 0.6875rem;  /* 11px — badges, eyebrows, micro labels */
	--ps-t-xs: 0.75rem;     /* 12px — ticker, fine print, spec sub-lines */
	--ps-t-sm: 0.8125rem;   /* 13px — meta, ledger rows, drawer body */
	--ps-t-ui: 0.875rem;    /* 14px — buttons, inputs, controls */
	--ps-t-base: 0.9375rem; /* 15px — body / UI default */
	--ps-t-md: 1.0625rem;   /* 17px — emphasized body, card headlines */
	--ps-t-lg: 1.1875rem;   /* 19px — totals, sub-heads */
	--ps-t-h2: 1.5rem;      /* 24px — section headings (.ps-h2) */
	--ps-t-h1: 2.5rem;      /* 40px — page/product titles (components may tune down responsively) */

	/* ---- Space (4px grid) ---- */
	--ps-sp-1: 0.25rem;   /*  4px */
	--ps-sp-2: 0.5rem;    /*  8px */
	--ps-sp-3: 0.75rem;   /* 12px */
	--ps-sp-4: 1rem;      /* 16px */
	--ps-sp-5: 1.25rem;   /* 20px */
	--ps-sp-6: 1.5rem;    /* 24px */
	--ps-sp-7: 2rem;      /* 32px */
	--ps-sp-8: 2.5rem;    /* 40px */
	--ps-sp-9: 3rem;      /* 48px */
	/* ---- Vertical rhythm ------------------------------------------------
	   SIX roles, one token each, redefined ONCE per breakpoint. Components
	   consume them; a component must never author its own section-scale
	   number. The ladder, largest to smallest:

	     --ps-section      section → section .......... the page's base beat
	     --ps-section-sm   sub-section / secondary beat
	     --ps-lede         masthead band → first content block
	     --ps-flow         block → block inside one section
	     --ps-flow-tight   heading → its own prose/list (read as one block)
	     --ps-flow-lockup  heading → its own subtitle line (one lockup)

	   --ps-lede is owned by .ps-page-head-inner's padding-bottom and by
	   nothing else. A page that adds its own top offset under the band
	   double-counts the gap — that is exactly how COA drifted to 76px and
	   the blog index to 88px against About/Wholesale's 40px.

	   Anything below this ladder is component-internal padding, not rhythm.
	   Literal rem values at section scale are a bug: --ps-section shrinks at
	   ≤740px and a hardcoded 3rem does not, so the two silently diverge on
	   phones. Grep for `3rem` / `2.5rem` before adding one. */
	--ps-section: 3rem;        /* 48 — measured from directpeptides.com */
	--ps-section-sm: 2.5rem;   /* 40 */
	--ps-lede: 2.5rem;         /* 40 */
	--ps-flow: 1.75rem;        /* 28 */
	--ps-flow-tight: 0.75rem;  /* 12 */
	--ps-flow-lockup: 0.5rem;  /*  8 */
	--ps-gap-grid: 1.25rem;    /* card grids (shop, why-us, blog, CTA) */
	--ps-pad-card: 1.25rem;    /* card / panel inner padding */
	--ps-caption-gap: 0.75rem; /* captions/fine-print hug their component (12px), the SECTION gap comes after */

	/* ---- Radius — pointed-corner doctrine ----
	   Brand truth: the boxes and the strips are rectangles, so the UI is too.
	   The scale is kept (future tuning = one line here); only the two semantic
	   circles opt out with border-radius: 50% (pack radio indicator, separator
	   dots) — they are punctuation/semantics, not containers. */
	--ps-r-xs: 0;   /* badges, hints */
	--ps-r-sm: 0;   /* inputs, small controls */
	--ps-r-md: 0;   /* thumbs, icon tiles */
	--ps-r-lg: 0;   /* cards, tiles */
	--ps-r-xl: 0;   /* floating panels (drawer, sheet, dock) */
	--ps-r-pill: 0;

	/* ---- Elevation ---- */
	--ps-shadow-sm: 0 2px 8px -4px rgba(11, 25, 40, 0.16);
	--ps-shadow-md: 0 16px 34px -18px rgba(11, 25, 40, 0.4);
	--ps-shadow-lg: 0 24px 70px rgba(11, 25, 40, 0.3), 0 4px 14px rgba(11, 25, 40, 0.12);
	--ps-shadow-card: 0 8px 28px rgba(11, 25, 40, 0.07);       /* STATIC card rest state — light + blurred (client call) */
	--ps-shadow-card-hover: 0 18px 44px rgba(11, 25, 40, 0.13); /* the same shadow, deepened on lift */
	--ps-ring: 0 0 0 3px rgba(0, 118, 184, 0.1);         /* focus ring */

	/* ---- Motion ---- */
	--ps-ease: cubic-bezier(0.22, 0.61, 0.36, 1);        /* standard glide */
	/* Entrance curve for content arriving on the page. An S: eases in gently,
	   carries speed through the middle, lands long and soft — instead of the
	   ease-out we had, which starts at full pelt and stops abruptly (the
	   "tan graph" feel). Same duration; only the distribution changes.
	   Sits between Material 3's emphasized (0.2,0,0,1) and easeInOutCubic. */
	--ps-ease-enter: cubic-bezier(0.62, 0.05, 0.2, 1);
	--ps-ease-spring: cubic-bezier(0.34, 1.3, 0.45, 1);  /* soft overshoot (panels, dock) */
	--ps-ease-pop: cubic-bezier(0.34, 1.55, 0.5, 1);     /* playful pop (badges, check) */
	--ps-dur-1: 0.15s;   /* hovers, color shifts */
	--ps-dur-2: 0.3s;    /* panels, slides */
	--ps-dur-3: 0.45s;   /* springs, morphs */
	--ps-dur-4: 0.62s;   /* scroll reveals */

	/* ---- Layout ---- */
	--ps-col: 1200px;
	--ps-prose: 750px;
	--ps-gutter: clamp(1.25rem, 2.8vw, 2.5rem);
}

/* The ONE place mobile rhythm changes — components never redefine their own.
   Every rung of the ladder steps down together; previously only --ps-section
   did, which collapsed --ps-section-sm onto it (both 40px) and flattened the
   two-tier rhythm the scale promises. */
@media (max-width: 740px) {
	:root {
		--ps-section: 2.5rem;      /* 40 */
		--ps-section-sm: 2rem;     /* 32 */
		--ps-lede: 1.75rem;        /* 28 */
		--ps-flow: 1.5rem;         /* 24 */
		--ps-gap-grid: 0.75rem;
		--ps-pad-card: 1.125rem;
	}
}

/* Classic themes get no border-box reset from WordPress (block themes do, via
   block defaults). Every fixed-dimension component in main.css was authored
   assuming border-box, so establish it globally here. */
*,
*::before,
*::after {
	box-sizing: border-box;
}