/* =========================================================================
   ID30 — foundation: design tokens, resets, shared surfaces, utilities.
   Every component stylesheet depends on this file (loaded first via
   inc/enqueue.php). No component-specific rules belong here.
   ========================================================================= */

/* ---------- Design tokens (palette sampled from id30.org) ---------- */
:root {
	--color-ink:      #212121;
	--color-graphite: #3f444b;
	--color-slate:    #69727d;
	--color-paper:    #f9fafa;
	--color-line:     #e6e6e6;

	--color-deep:     #024768;
	--color-deep-700: #03416b;
	--color-navy:     #142247;
	--color-steel:    #385ea0;
	--color-mist:     #8faebc;
	--color-ember:    #e22701;

	--font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-title:   "Lexend",  ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body:    "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

	--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

	--shadow-diffusion: 0 30px 60px -30px rgba(2, 71, 104, 0.18),
	                    0 10px 25px -15px rgba(33, 33, 33, 0.08);

	--section-pad-y: clamp(48px, 6vw, 80px);
}

/* WP toolbar offset — exposed only when wp_admin_bar is rendered (body.admin-bar).
   Components additively use `calc(... + var(--id30-admin-bar, 0px))` so the
   fallback collapses to 0 for logged-out visitors. */
body.admin-bar { --id30-admin-bar: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar { --id30-admin-bar: 46px; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 {
	font-family: var(--font-title);
	color: var(--color-graphite);
	letter-spacing: -0.01em;
	margin: 0;
	font-weight: 300;
}
p { margin: 0; }

/* ---------- Reusable surfaces ---------- */
.surface-paper { background-color: var(--color-paper); }
.surface-deep  { background-color: var(--color-deep); color: #fff; }
.surface-ink   { background-color: var(--color-ink); color: #fff; }

.deep-grain {
	background-image:
		radial-gradient(1200px 600px at 12% -10%, rgba(56,94,160,0.28), transparent 60%),
		radial-gradient(900px 500px at 92% 10%, rgba(226,39,1,0.12), transparent 60%),
		radial-gradient(1400px 800px at 50% 120%, rgba(20,34,71,0.55), transparent 60%);
}

/* ---------- Icons ---------- */
.id30-icon { flex-shrink: 0; vertical-align: middle; }

/* ---------- Reveal-on-scroll (Framer Motion whileInView replacement) ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 820ms var(--ease-spring), transform 820ms var(--ease-spring);
	transition-delay: calc(var(--reveal-delay, 0) * 1ms);
	will-change: transform, opacity;
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}