/* ==========================================================================
   SitePulse Labs — Foundation Stylesheet (Batch 1 · updated Phase 3A)
   Reset, design-token custom properties, base typography, and the
   responsive foundation. Component-level styles live in the separate
   global.css, home.css, inner.css, and editor.css files.

   Phase 3A (Identity, Tokens, Fonts & Logo): added the --sp-color-ink-deep /
   -rule / -teal-ink / -warn-ink tokens from the approved Final Hybrid Visual
   Direction, swapped the display face from Space Grotesk to Archivo, and
   moved the radius system to a uniform 2px per the approved identity
   ("no rounded app-icon container", hard-edged instrument aesthetic).
   Homepage-specific component styles are NOT part of this batch — see
   assets/css/home.css, added when the homepage is built (Phase 3B).
   ========================================================================== */

/* --- Design tokens as custom properties (mirrors theme.json) --- */
:root {
	--sp-color-ink-navy: #0B1E33;
	--sp-color-ink-deep: #071626;
	--sp-color-lab-blue: #1D4E89;
	--sp-color-signal-teal: #0FA88C;
	--sp-color-teal-ink: #076A59;
	--sp-color-paper-white: #FFFFFF;
	--sp-color-mist-gray: #F3F6F8;
	--sp-color-rule: #DCE3E9;
	--sp-color-slate: #5B6B7A;
	--sp-color-metric-warn: #D98F2B;
	--sp-color-metric-warn-ink: #8A5A12;
	--sp-color-metric-poor: #C2493D;

	/*
	 * The approved families remain first in each stack. This distributable
	 * build makes no remote font request and falls back to platform fonts when
	 * Archivo or IBM Plex are not installed locally.
	 */
	--sp-font-display: "Archivo", "Aptos Display", "Segoe UI", -apple-system, system-ui, sans-serif;
	--sp-font-body: "IBM Plex Sans", "Aptos", "Segoe UI", -apple-system, system-ui, sans-serif;
	--sp-font-data: "IBM Plex Mono", "Cascadia Mono", "SFMono-Regular", "Courier New", monospace;

	/* Uniform 2px per the approved identity — replaces the earlier 8/6/12px
	   scale. Kept as three separate tokens (rather than collapsed to one)
	   so card/button/image radii can still be tuned independently later
	   without a token rename. */
	--sp-radius-card: 2px;
	--sp-radius-button: 2px;
	--sp-radius-image: 2px;

	--sp-border-hairline: 1px solid rgba(11, 30, 51, 0.1);
	--sp-shadow-card: 0 1px 2px rgba(11, 30, 51, 0.06);

	--sp-space-1: 0.5rem;  /* 8px  */
	--sp-space-2: 1rem;    /* 16px */
	--sp-space-3: 1.5rem;  /* 24px */
	--sp-space-4: 2rem;    /* 32px */
	--sp-space-6: 3rem;    /* 48px */
	--sp-space-8: 4rem;    /* 64px */

	--sp-content-width: 720px;
	--sp-wide-width: 1200px;
}

/* --- Minimal modern reset --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--sp-color-paper-white);
	color: var(--sp-color-ink-navy);
	font-family: var(--sp-font-body);
	font-size: 1.125rem;
	line-height: 1.6;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sp-radius-image);
}

/* --- Base typography (mobile-first; scales up at breakpoints below) --- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sp-font-display);
	font-weight: 700; /* Archivo 700 per the approved identity (was Space Grotesk 600) */
	color: var(--sp-color-ink-navy);
	line-height: 1.2;
	margin: 0 0 var(--sp-space-2);
}

h1 {
	font-size: 2.25rem;
}
h2 {
	font-size: 1.75rem;
}
h3 {
	font-size: 1.375rem;
}

p {
	margin: 0 0 var(--sp-space-3);
}

small,
.sp-caption {
	font-size: 0.875rem;
	color: var(--sp-color-slate);
}

code,
pre,
.sp-data {
	font-family: var(--sp-font-data);
}

a {
	color: var(--sp-color-lab-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--sp-color-signal-teal);
}

/* --- Accessibility: visible focus state (Phase 2 quality floor) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sp-color-signal-teal);
	outline-offset: 2px;
}

/* --- Accessibility utility: visually hides text but keeps it available to
   assistive tech (standard WordPress pattern, used for form labels etc.) --- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Buttons (base styles shared by all components) --- */
.sp-button {
	display: inline-block;
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: 1rem;
	padding: var(--sp-space-2) var(--sp-space-3);
	border-radius: var(--sp-radius-button);
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.sp-button--primary {
	background: var(--sp-color-signal-teal);
	color: var(--sp-color-paper-white);
}

.sp-button--secondary {
	background: transparent;
	color: var(--sp-color-ink-navy);
	border: 1px solid var(--sp-color-ink-navy);
}

/* --- Card surface base (used by article cards, Lab Snapshot, etc.) --- */
.sp-card {
	background: var(--sp-color-paper-white);
	border: var(--sp-border-hairline);
	border-radius: var(--sp-radius-card);
	box-shadow: var(--sp-shadow-card);
}

/* --- Layout containers --- */
.sp-container {
	max-width: var(--sp-wide-width);
	margin-inline: auto;
	padding-inline: var(--sp-space-2);
}

.sp-content {
	max-width: var(--sp-content-width);
	margin-inline: auto;
}

/* --- Motion: minimal, and fully disabled on request --- */
@media (prefers-reduced-motion: no-preference) {
	a,
	button,
	.sp-fade-in {
		transition: color 120ms ease-out, background-color 120ms ease-out, opacity 200ms ease-out;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Responsive foundation — mobile-first breakpoints
   360px baseline · 768px tablet · 1024px desktop · 1440px wide desktop
   ========================================================================== */

@media (min-width: 768px) {
	.sp-container,
	.sp-content {
		padding-inline: var(--sp-space-3);
	}
}

@media (min-width: 1024px) {
	h1 {
		font-size: 3rem;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.5rem;
	}

	.sp-container {
		padding-inline: var(--sp-space-4);
	}
}

@media (min-width: 1440px) {
	h1 {
		font-size: 3.5rem;
	} /* full Phase 2 scale at the largest breakpoint */
	h2 {
		font-size: 2.25rem;
	}
}