/*
 * Spacing + scale tokens — Kadence ISJAC.
 *
 * Single source of truth for whitespace decisions. Everything downstream
 * references these vars; never invent local pixel/rem values.
 *
 * Philosophy (per research/whitespace-standards.md):
 *   - 8pt base grid; all values multiples of 8px or 4px sub-grid for type.
 *   - Macro spacing (between sections) uses clamp() for fluid responsive
 *     scaling, no breakpoint stair-steps.
 *   - Component spacing (inside cards/buttons) is static; internal layout
 *     should feel stable across viewports.
 *   - Ratio rule: micro padding : macro padding ≈ 1 : 2.
 *     16px card padding → 24-32px gap between cards.
 *   - 24px baseline (1.5 line-height on 16px body); type stacks land on
 *     multiples of 24px so vertical rhythm reads as designed.
 *
 * Color/typography tokens live in
 * wp-content/plugins/isjac-core/assets/css/tokens.css. This file only
 * defines spacing, gap, baseline, and content-width — the dimensions
 * theme.json cannot reach with token granularity.
 */

:root {
	/* ---------- Section padding (macro) ---------- *
	 * Vertical padding between major page sections. Use on group blocks
	 * that wrap a featured grid, an article section, etc.
	 */
	--isjac-section-xs:  clamp(1.5rem,  calc(0.75rem + 3vw), 2rem);   /* 24 → 32 */
	--isjac-section-sm:  clamp(2rem,    calc(1rem    + 4vw), 3rem);   /* 32 → 48 */
	--isjac-section-md:  clamp(2.5rem,  calc(1rem    + 5vw), 4rem);   /* 40 → 64 */
	--isjac-section-lg:  clamp(3rem,    calc(1rem    + 6vw), 5rem);   /* 48 → 80 */
	--isjac-section-xl:  clamp(4rem,    calc(1.5rem  + 8vw), 6rem);   /* 64 → 96 */
	--isjac-section-2xl: clamp(5rem,    calc(2rem    + 10vw), 7rem);  /* 80 → 112 */

	/* ---------- Component padding (micro) ---------- *
	 * Internal padding inside cards, buttons, callouts. Static; does NOT
	 * scale with viewport (internal layouts feel cheap when they shift).
	 */
	--isjac-pad-xs:  0.5rem;   /* 8  — icon spacing, button micro-gap */
	--isjac-pad-sm:  0.75rem;  /* 12 — tight stack (icon + label) */
	--isjac-pad-md:  1rem;     /* 16 — standard card padding */
	--isjac-pad-lg:  1.5rem;   /* 24 — featured card / article header */
	--isjac-pad-xl:  2rem;     /* 32 — hero text container */
	--isjac-pad-2xl: 3rem;     /* 48 — feature blocks */

	/* ---------- Gaps (between siblings) ---------- *
	 * Grid/flex gap between cards or list items.
	 * Apply the 1:2 ratio: 16px padding inside → 24px gap between.
	 */
	--isjac-gap-tight:    1rem;     /* 16 — chip rows, dense lists */
	--isjac-gap-default:  1.5rem;   /* 24 — standard 3-col card grid */
	--isjac-gap-spacious: 2rem;     /* 32 — featured row, complex cards */
	--isjac-gap-fluid:    clamp(1rem, 2vw, 2rem);

	/* ---------- Baseline rhythm ---------- *
	 * Body line-height. All vertical type spacing should be multiples
	 * of (font-size * baseline) — typically 24px on 16px body.
	 */
	--isjac-baseline: 1.6;

	/* ---------- Content widths ---------- *
	 * 65ch = Bringhurst's optimal measure for prose. Wider for cards.
	 */
	--isjac-content-prose:        65ch;
	--isjac-content-prose-wide:   75ch;
	--isjac-content-constrained:  clamp(20rem, 90vw, 72rem); /* ~1152px max */
	--isjac-content-full:         100%;

	/* ---------- Border radius ---------- *
	 * 8px small (cards, inputs); 12px large (heroes, pull-quotes).
	 * Mirror in tokens.css plugin file.
	 */
	--isjac-radius-md: 8px;
	--isjac-radius-lg: 12px;

	/* ---------- Shadow ---------- */
	--isjac-shadow-card: 0 1px 2px rgba(2, 7, 38, 0.04),
	                     0 8px 24px rgba(2, 7, 38, 0.06);
	--isjac-shadow-hero: 0 24px 64px rgba(2, 7, 38, 0.10);

	/* ---------- Hero background ----------
	 * --isjac-hero-bg-image and --isjac-hero-overlay-opacity are owned by
	 * the Customizer (Appearance → Customize → ISJAC Brand) and injected
	 * via inline CSS attached to this stylesheet's handle. See
	 * inc/customizer.php. The values below are last-resort fallbacks if
	 * the inline injection ever fails to load.
	 */
	--isjac-hero-bg-image: none;
	--isjac-hero-overlay-opacity: 0.7;
}