/* ============================================================
   ScaleIQ Base — reset, typography, layout primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	tab-size: 4;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	background: var(--surface-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	transition: background-color var(--t-slow), color var(--t-slow);
	min-height: 100vh;
}

/* Theme-aware background gradient */
:root[data-theme="dark"] body {
	background:
		radial-gradient(ellipse 80% 60% at 70% -10%, rgba(32, 227, 255, 0.10), transparent 60%),
		radial-gradient(ellipse 60% 40% at 0% 100%, rgba(45, 125, 255, 0.08), transparent 60%),
		var(--surface-bg);
}

:root[data-theme="light"] body {
	background:
		radial-gradient(ellipse 80% 60% at 70% -10%, rgba(45, 125, 255, 0.06), transparent 60%),
		var(--surface-bg);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { fill: currentColor; }

a {
	color: var(--brand-electric-azure);
	text-decoration: none;
	transition: color var(--t-fast), opacity var(--t-fast);
}
a:hover { color: var(--brand-cyan-glow); }
:root[data-theme="light"] a:hover { color: var(--brand-electric-azure); opacity: 0.8; }

button { font: inherit; cursor: pointer; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--text-primary);
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.015em;
}

h1, .h1 {
	font-size: clamp(var(--fs-h1-m), 6vw, var(--fs-h1-d));
	line-height: 1.1;
	letter-spacing: -0.015em;
}

h2, .h2 {
	font-size: clamp(2rem, 4vw, var(--fs-h2));
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.005em;
}

h3, .h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 600;
}

p { margin: 0 0 var(--s-4); color: var(--text-secondary); }
p.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

/* Layout primitives */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.section {
	padding-top: clamp(var(--s-12), 8vw, var(--s-24));
	padding-bottom: clamp(var(--s-12), 8vw, var(--s-24));
}

.section--tight {
	padding-top: var(--s-12);
	padding-bottom: var(--s-12);
}

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }

/* Visually-hidden (accessible) */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip to content */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--s-4);
	background: var(--cta-bg);
	color: var(--cta-text);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius-md);
	z-index: 100;
	transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s-4); color: var(--cta-text); }

/* Focus states */
:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* Selection */
::selection {
	background: var(--brand-electric-azure);
	color: #fff;
}

/* Eyebrow utility */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-cyan-glow);
}
:root[data-theme="light"] .eyebrow { color: var(--brand-electric-azure); }

.eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}