/* ==========================================================================
   Peak Performance Peptides — Design Tokens
   Palette: "Soft Gray / Blue"

   This file defines vocabulary only. No selectors beyond :root, no layout,
   no component styling. Everything else in the theme consumes these.
   Portable: copy this one file to carry the design system anywhere.
   ========================================================================== */

:root {
	/* ----------------------------------------------------------------------
	   1. COLOR — core palette
	   ---------------------------------------------------------------------- */
	--color-bg: #F5F7FA;
	--color-bg-secondary: #EAF0F7;
	--color-card: #FFFFFF;

	--color-text: #172033;
	--color-text-muted: #637189;
	--color-accent: #163B73;

	--color-border: rgba(38, 64, 102, 0.12);

	--color-button: #2459B8;
	--color-button-text: #FFFFFF;
	--color-button-hover: #194898;

	/* Dark surfaces — header band, hero band, footer.
	   The logo is glowing blue on black, so it needs a dark ground. */
	--color-dark: #0B1220;
	--color-dark-2: #101B2E;

	/* ----------------------------------------------------------------------
	   2. COLOR — derived roles
	   Text and lines that sit ON the dark bands, plus interaction states.
	   Named by job, not by value, so a repaint touches only this block.
	   ---------------------------------------------------------------------- */
	--color-on-dark: #F2F6FC;
	--color-on-dark-muted: rgba(226, 234, 246, 0.68);
	--color-on-dark-border: rgba(150, 180, 225, 0.18);
	--color-on-dark-hover: #7FB4FF;

	--color-accent-hover: #12305E;
	--color-accent-soft: rgba(36, 89, 184, 0.08);
	--color-accent-soft-strong: rgba(36, 89, 184, 0.14);

	--color-border-strong: rgba(38, 64, 102, 0.22);

	/* Navy hairline for cards that need a crisp edge against the page rather
	   than the near-invisible default border. Solid on hover. */
	--color-border-navy: rgba(22, 59, 115, 0.30);
	--color-border-navy-strong: var(--color-accent);
	--color-focus: #2459B8;
	--color-focus-ring: rgba(36, 89, 184, 0.35);

	/* Brand glow — echoes the DNA helix mark. Use sparingly and only on dark. */
	--color-glow: #4DA3FF;
	--color-glow-soft: rgba(77, 163, 255, 0.35);

	/* Status */
	--color-success: #1B7F5A;
	--color-warning: #A9700F;
	--color-danger: #B3261E;
	--color-sale: #1B7F5A;

	/* ----------------------------------------------------------------------
	   3. GRADIENTS
	   ---------------------------------------------------------------------- */
	--gradient-dark: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
	--gradient-hero: radial-gradient(
			120% 90% at 50% 0%,
			rgba(36, 89, 184, 0.28) 0%,
			rgba(11, 18, 32, 0) 62%
		),
		linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
	--gradient-accent: linear-gradient(135deg, var(--color-button) 0%, var(--color-accent) 100%);
	/* Soft navy wash for content panels on light surfaces. Fades to nothing so
	   text at the bottom of a tall panel keeps full contrast. */
	--gradient-navy-fade: linear-gradient(
		160deg,
		rgba(36, 89, 184, 0.11) 0%,
		rgba(36, 89, 184, 0.045) 38%,
		rgba(36, 89, 184, 0) 78%
	);

	/* Overlay laid OVER a hero background image. Alpha rather than solid, so
	   the photo reads through while the headline keeps contrast. */
	--gradient-hero-overlay:
		radial-gradient(115% 80% at 50% 6%, rgba(36, 89, 184, 0.35) 0%, rgba(11, 18, 32, 0) 58%),
		linear-gradient(
			180deg,
			rgba(11, 18, 32, 0.86) 0%,
			rgba(11, 18, 32, 0.60) 42%,
			rgba(16, 27, 46, 0.96) 100%
		);

	/* Hero scrim, desktop: heavy behind the text column on the left, clearing
	   entirely by the right third so the product photography stays bright.
	   Second layer blends the top edge into the header and resolves the bottom
	   to the band colour so the next section meets it cleanly. */
	--gradient-hero-scrim:
		linear-gradient(
			90deg,
			rgba(11, 18, 32, 0.94) 0%,
			rgba(11, 18, 32, 0.84) 26%,
			rgba(11, 18, 32, 0.42) 52%,
			rgba(11, 18, 32, 0.08) 76%,
			rgba(11, 18, 32, 0) 100%
		),
		linear-gradient(
			180deg,
			rgba(11, 18, 32, 0.55) 0%,
			rgba(11, 18, 32, 0) 24%,
			rgba(11, 18, 32, 0) 66%,
			rgba(16, 27, 46, 0.90) 100%
		);

	/* Hero scrim, phones: the headline spans nearly the full width there, so
	   the scrim runs top-down instead of left-right — heavy through the text,
	   clearing over the vials below it. */
	--gradient-hero-scrim-mobile:
		linear-gradient(
			180deg,
			rgba(11, 18, 32, 0.90) 0%,
			rgba(11, 18, 32, 0.82) 38%,
			rgba(11, 18, 32, 0.45) 60%,
			rgba(11, 18, 32, 0.20) 78%,
			rgba(16, 27, 46, 0.88) 100%
		);

	/* Lit-corner navy, for a panel that has to read as an object sitting on a
	   light page rather than as a hole cut in it. Brightest blue at the top
	   left, dying out by the middle so the panel has a light source instead of
	   a flat two-stop wash. Same structure as --gradient-hero, which is what
	   makes the two read as one family. */
	--gradient-navy-panel:
		radial-gradient(125% 105% at 0% 0%, rgba(36, 89, 184, 0.60) 0%, rgba(36, 89, 184, 0) 62%),
		linear-gradient(158deg, #163B73 0%, #12294D 46%, #0B1220 100%);

	--gradient-rule: linear-gradient(
		90deg,
		rgba(77, 163, 255, 0) 0%,
		var(--color-glow-soft) 50%,
		rgba(77, 163, 255, 0) 100%
	);

	/* ----------------------------------------------------------------------
	   4. TYPE SCALE
	   The families are declared here rather than left to Astra's customizer.
	   Astra's own setting only ever loaded Plus Jakarta Sans at weight 600, so
	   every 700 the theme asked for was drawn as a synthetic bold — the browser
	   smearing the 600 face sideways. That is what made the hero read soft.
	   functions.php now loads 600/700/800 for real; owning the family here
	   means the stack travels with the theme instead of with a site setting.
	   Fluid sizes clamp between a 360px and a 1280px viewport.
	   ---------------------------------------------------------------------- */
	--font-heading: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
		'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
		Roboto, Helvetica, Arial, sans-serif;
	/* Record numbers, lot codes, batch IDs — anything that should read as data
	   rather than prose. System stack, so it costs no extra font request. */
	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
		'Liberation Mono', monospace;

	--text-xs: 0.75rem;                                  /* 12px  — meta, badges  */
	--text-sm: 0.875rem;                                 /* 14px  — captions      */
	--text-base: 1rem;                                   /* 16px  — body          */
	--text-md: 1.0625rem;                                /* 17px  — lead body     */
	--text-lg: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);   /* 18 → 20 */
	--text-xl: clamp(1.375rem, 0.7vw + 1.22rem, 1.625rem);   /* 22 → 26 */
	--text-2xl: clamp(1.625rem, 1.2vw + 1.37rem, 2.125rem);  /* 26 → 34 */
	--text-3xl: clamp(2rem, 2vw + 1.58rem, 2.75rem);         /* 32 → 44 */
	--text-4xl: clamp(2.375rem, 3.2vw + 1.7rem, 3.5rem);     /* 38 → 56 */
	--text-5xl: clamp(2.75rem, 4.6vw + 1.78rem, 4.25rem);    /* 44 → 68 */

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;     /* display headlines only — must be loaded */

	--leading-tight: 1.12;
	--leading-snug: 1.28;
	--leading-normal: 1.65;
	--leading-relaxed: 1.75;
	/* Display leading for stacked all-caps lines. Caps have no descenders, so
	   sub-1 leading closes the gap without the lines ever touching. */
	--leading-display: 0.92;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.04em;
	--tracking-widest: 0.14em;   /* eyebrow / all-caps labels */
	/* Heavy caps carry their own sidebearings; pulling them tighter welds the
	   lines into a single mass. Only safe at 700+ — it smears at text weights. */
	--tracking-display: -0.035em;
	--tracking-eyebrow: 0.28em;

	--measure: 68ch;             /* comfortable reading width */
	--measure-narrow: 46ch;

	/* ----------------------------------------------------------------------
	   5. SPACING — 4px base
	   ---------------------------------------------------------------------- */
	--space-3xs: 0.25rem;   /* 4  */
	--space-2xs: 0.5rem;    /* 8  */
	--space-xs: 0.75rem;    /* 12 */
	--space-sm: 1rem;       /* 16 */
	--space-md: 1.5rem;     /* 24 */
	--space-lg: 2rem;       /* 32 */
	--space-xl: 3rem;       /* 48 */
	--space-2xl: 4rem;      /* 64 */
	--space-3xl: 6rem;      /* 96 */
	--space-4xl: 8rem;      /* 128 */

	/* Vertical rhythm between full-width page sections */
	--section-y: clamp(3.5rem, 6vw, 7rem);
	--section-y-tight: clamp(2.5rem, 4vw, 4rem);

	/* ----------------------------------------------------------------------
	   6. LAYOUT
	   ---------------------------------------------------------------------- */
	/* Aspect ratio of the hero background image, width / height. Used to
	   reserve exactly its height on mobile, where the image is shown whole
	   rather than cropped. Update this if the image is replaced. */
	--hero-image-ratio: 2;   /* desktop hero art is 1774 × 887 */
	/* assets/img/hero-mobile.webp — the same shot cropped to the product and
	   cut out of its white ground, since the desktop art is half empty white
	   and composes for a side-by-side layout a phone has no room for. The
	   alpha is what lets the vials sit ON the gradient rather than inside a
	   white rectangle. 758 × 625. */
	--hero-mobile-ratio: 1.213;

	--container-max: 1200px;
	--container-wide: 1400px;
	--container-narrow: 760px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);

	/* ----------------------------------------------------------------------
	   7. RADIUS
	   ---------------------------------------------------------------------- */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	/* ----------------------------------------------------------------------
	   8. ELEVATION
	   Light, cool-tinted shadows so cards lift off #F5F7FA without muddiness.
	   ---------------------------------------------------------------------- */
	--shadow-xs: 0 1px 2px rgba(23, 32, 51, 0.05);
	--shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.05), 0 2px 6px rgba(23, 32, 51, 0.05);
	--shadow-md: 0 2px 4px rgba(23, 32, 51, 0.05), 0 8px 20px rgba(23, 32, 51, 0.07);
	--shadow-lg: 0 4px 8px rgba(23, 32, 51, 0.05), 0 18px 40px rgba(23, 32, 51, 0.10);
	--shadow-xl: 0 8px 16px rgba(23, 32, 51, 0.06), 0 32px 64px rgba(23, 32, 51, 0.12);
	--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);

	/* Glow used only on dark bands (logo, hero accents, focused fields) */
	--shadow-glow: 0 0 0 1px rgba(77, 163, 255, 0.25), 0 0 28px rgba(77, 163, 255, 0.22);

	/* ----------------------------------------------------------------------
	   9. MOTION
	   ---------------------------------------------------------------------- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--duration-slow: 380ms;
	--transition-base: var(--duration-base) var(--ease-out);

	/* ----------------------------------------------------------------------
	   10. Z-INDEX
	   ---------------------------------------------------------------------- */
	--z-base: 1;
	--z-raised: 10;
	--z-sticky: 100;
	--z-header: 500;
	--z-overlay: 900;
	--z-modal: 1000;
}

/* Astra reads a handful of its own custom properties for buttons, links and
   containers. Mapping them here means the customizer defaults inherit the
   palette instead of fighting it. */
:root {
	--ast-global-color-0: var(--color-accent);
	--ast-global-color-1: var(--color-button);
	--ast-global-color-2: var(--color-text);
	--ast-global-color-3: var(--color-text-muted);
	--ast-global-color-4: var(--color-bg);
	--ast-global-color-5: var(--color-card);
	--ast-global-color-6: var(--color-bg-secondary);
	--ast-global-color-7: var(--color-border);
	--ast-global-color-8: var(--color-dark);

	/* WordPress emits a SECOND, separate set of variables for the same palette
	   — `--wp--preset--color--*` — built from whatever colours Astra is
	   configured with on that site. Those are what the block editor's colour
	   utilities resolve against, and WordPress prints them with !important, so
	   a block coloured in the editor ignores everything above and takes the
	   host site's palette instead. The home page headline is set that way.

	   Remapping them here is what makes an editor-coloured block land the same
	   on any install. Without it the design is only correct on the site whose
	   customizer happened to be configured to match it. */
	--wp--preset--color--ast-global-color-0: var(--color-accent);
	--wp--preset--color--ast-global-color-1: var(--color-button);
	--wp--preset--color--ast-global-color-2: var(--color-text);
	--wp--preset--color--ast-global-color-3: var(--color-text-muted);
	--wp--preset--color--ast-global-color-4: var(--color-bg);
	--wp--preset--color--ast-global-color-5: var(--color-card);
	--wp--preset--color--ast-global-color-6: var(--color-bg-secondary);
	--wp--preset--color--ast-global-color-7: var(--color-border);
	--wp--preset--color--ast-global-color-8: var(--color-dark);

	--ast-border-color: var(--color-border);
	--ast-comment-inputs-background: var(--color-card);
	--ast-container-default-xlg-padding: var(--gutter);
	--ast-container-default-lg-padding: var(--gutter);
	--ast-container-default-slg-padding: var(--gutter);
	--ast-container-default-md-padding: var(--gutter);
	--ast-container-default-sm-padding: var(--gutter);
	--ast-container-default-xs-padding: var(--gutter);
	--ast-container-default-xxs-padding: var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 1ms;
		--duration-base: 1ms;
		--duration-slow: 1ms;
	}
}