/* ==========================================================================
   Hipertrofia.org — Design tokens
   Palette: navy / red / white, derived from the brand lockup.
   Every text pair below is >= 4.5:1 on its intended background (WCAG AA).
   ========================================================================== */

:root {
	/* --- Brand ----------------------------------------------------------- */
	--hp-navy-900: #061f30;
	--hp-navy-800: #092c44;
	--hp-navy: #0c3d5e; /* logo navy — 11.4:1 on white */
	--hp-navy-600: #155276;
	--hp-navy-500: #1e6c93; /* 5.8:1 on white */
	--hp-navy-200: #b9d2e3;
	--hp-navy-100: #dce9f2;
	--hp-navy-050: #eef4f9;

	--hp-red: #ed1b24; /* logo red — fills / large type only */
	--hp-red-ink: #c8101a; /* 5.9:1 on white — small text + links */
	--hp-red-deep: #a50e17;
	--hp-red-100: #fbd9db;
	--hp-red-050: #fef2f2;

	--hp-white: #ffffff;

	/* --- Neutrals -------------------------------------------------------- */
	--hp-ink: #14202b; /* body copy — 15.3:1 on white */
	--hp-ink-2: #4a5a69; /* meta / secondary — 7.1:1 on white */
	--hp-ink-3: #647585; /* placeholders & icons — 4.8:1 on white */
	--hp-line: #e1e8ef;
	--hp-line-strong: #c9d5e0;
	--hp-surface: #f5f8fa;
	--hp-surface-2: #eaf0f5;

	/* --- Semantic -------------------------------------------------------- */
	--hp-bg: var(--hp-white);
	--hp-fg: var(--hp-ink);
	--hp-muted-fg: var(--hp-ink-2);
	--hp-primary: var(--hp-navy);
	--hp-on-primary: var(--hp-white);
	--hp-accent: var(--hp-red-ink);
	--hp-on-accent: var(--hp-white);
	--hp-border: var(--hp-line);
	--hp-ring: var(--hp-red);

	/* Per-hub accent, overridden by .hub--<slug> (see theme.css) */
	--hp-hub: var(--hp-navy);
	--hp-hub-soft: var(--hp-navy-050);

	/* --- Typography ------------------------------------------------------ */
	--hp-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hp-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--hp-fs-xs: 0.75rem; /* 12 — uppercase labels only */
	--hp-fs-sm: 0.875rem; /* 14 */
	--hp-fs-base: 1rem; /* 16 — minimum body size */
	--hp-fs-md: 1.125rem; /* 18 — article body */
	--hp-fs-lg: 1.25rem; /* 20 */
	--hp-fs-xl: 1.5rem; /* 24 */
	--hp-fs-2xl: 1.875rem; /* 30 */
	--hp-fs-3xl: 2.25rem; /* 36 */
	--hp-fs-4xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--hp-fs-hero: clamp(2.125rem, 1.3rem + 3.6vw, 3.75rem);

	--hp-lh-tight: 1.15;
	--hp-lh-snug: 1.3;
	--hp-lh-normal: 1.5;
	--hp-lh-reading: 1.7;

	/* --- Spacing (standard density) -------------------------------------- */
	--hp-space-1: 0.25rem;
	--hp-space-2: 0.5rem;
	--hp-space-3: 0.75rem;
	--hp-space-4: 1rem;
	--hp-space-5: 1.5rem;
	--hp-space-6: 2rem;
	--hp-space-7: 3rem;
	--hp-space-8: 4rem;
	--hp-space-9: 5rem;

	/* --- Layout ---------------------------------------------------------- */
	--hp-shell: 1240px;
	--hp-shell-narrow: 760px;
	--hp-gutter: 1.25rem;
	--hp-header-h: 64px;

	/* --- Shape / depth --------------------------------------------------- */
	--hp-radius-sm: 4px;
	--hp-radius: 8px;
	--hp-radius-lg: 14px;
	--hp-radius-pill: 999px;
	--hp-shadow-sm: 0 1px 2px rgba(12, 61, 94, 0.08);
	--hp-shadow: 0 2px 8px rgba(12, 61, 94, 0.09);
	--hp-shadow-lg: 0 12px 32px rgba(6, 31, 48, 0.14);

	/* --- Motion ---------------------------------------------------------- */
	--hp-dur-fast: 150ms;
	--hp-dur: 220ms;
	--hp-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--hp-gutter: 2rem;
		--hp-header-h: 72px;
	}
}