/* ==========================================================================
   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;
	--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 */
	/* Semantic rhythm — redefined ONCE per breakpoint, never per component. */
	--ps-section: 3.5rem;      /* gap between page sections */
	--ps-section-sm: 2.5rem;   /* tighter rhythm (page heads, sub-sections) */
	--ps-gap-grid: 1.25rem;    /* card grids (shop, why-us, blog, CTA) */
	--ps-pad-card: 1.25rem;    /* card / panel inner padding */

	/* ---- Radius ---- */
	--ps-r-xs: 6px;    /* badges, hints */
	--ps-r-sm: 10px;   /* inputs, small controls */
	--ps-r-md: 12px;   /* thumbs, icon tiles */
	--ps-r-lg: 16px;   /* cards, tiles */
	--ps-r-xl: 20px;   /* floating panels (drawer, sheet, dock) */
	--ps-r-pill: 999px;

	/* ---- 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-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 */
	--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. */
@media (max-width: 740px) {
	:root {
		--ps-section: 3rem;
		--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;
}