/*! Strand v0.5.0 | MIT License | dillingerstaffing.com */

/*
 * Strand Base Styles
 * Global styles applied after reset. Establishes the lab surface,
 * typography defaults, focus indicators, and grain texture.
 * Requires tokens.css to be loaded first.
 */

/* ── Smooth anchor scrolling ──
   When users click an in-page anchor (e.g. nav link to #section),
   the browser smoothly scrolls there instead of hopping. Honors
   prefers-reduced-motion via the rule below. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ── Lab Surface (DL Part 9.1) ──
   Default body background: dot grid + overhead LED glow + vertical
   gradient. Three layers, each invisible alone, together producing
   "this feels designed." */
body {
	font-family: var(--strand-font-sans);
	font-size: var(--strand-text-base);
	font-weight: var(--strand-weight-regular);
	line-height: var(--strand-leading-normal);
	color: var(--strand-on-surface-primary);
	/* Layer 1: Dot grid (graph paper / cleanroom floor) */
	background: radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
		/* Layer 2: Overhead LED glow */
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.03) 0%, transparent 100%),
		/* Layer 3: Gentle vertical gradient */
		linear-gradient(
			180deg,
			var(--strand-surface-primary) 0%,
			var(--strand-surface-elevated) 40%,
			var(--strand-surface-recessed) 100%
		);
	background-size: 24px 24px, 100% 100%, 100% 100%;
	background-color: var(--strand-surface-primary);
}

/* ── Lab Surface as opt-in utility (DL Part 9.1) ──
   Same treatment as body, applied to any element. Use on nested
   showcase containers, hero containers, etc. */
.strand-lab-surface {
	background: radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.03) 0%, transparent 100%),
		linear-gradient(
			180deg,
			var(--strand-surface-primary) 0%,
			var(--strand-surface-elevated) 40%,
			var(--strand-surface-recessed) 100%
		);
	background-size: 24px 24px, 100% 100%, 100% 100%;
	background-color: var(--strand-surface-primary);
}

/* ── Lab Surface Warm Variant (DL Part 9.1) ──
   Adds a fourth layer: a very subtle warm radial at the bottom edge
   echoing "warm wood underfoot, controlled daylight overhead." Use
   on hero/showcase contexts. The warm radial alpha is capped at 0.02. */
.strand-lab-surface--warm {
	background: radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.03) 0%, transparent 100%),
		radial-gradient(ellipse 80% 40% at 50% 100%, var(--strand-warm-radial) 0%, transparent 100%),
		linear-gradient(
			180deg,
			var(--strand-surface-primary) 0%,
			var(--strand-surface-elevated) 40%,
			var(--strand-surface-recessed) 100%
		);
	background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%;
	background-color: var(--strand-surface-primary);
}

/* ── Grain Texture Overlay (DL Part 9.2) ──
   Default uniform fractal noise at 0.012 opacity. Felt, not seen. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	opacity: 0.012;
	pointer-events: none;
	z-index: 9999;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Grain Variant: Concrete (DL Part 9.2) ──
   Coarser baseFrequency (0.65 vs 0.9). Evokes brushed aluminum /
   poured concrete. Apply as body modifier class. */
body.strand-grain-concrete::after {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Grain Variant: Wood (DL Part 9.2) ──
   Directional turbulence (asymmetric baseFrequency 0.9 0.3). Evokes
   brushed wood grain. Slightly lower opacity (0.010) because
   directional patterns are more visible than uniform noise. */
body.strand-grain-wood::after {
	opacity: 0.01;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.3' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Headings (DL 4.2 Type Scale + 4.5 Weight Hierarchy) ── */
h1,
h2,
h3,
h4 {
	color: var(--strand-gray-800);
	margin: 0;
}

/* Display headings: light weight, tighter tracking, tight leading */
h1 {
	font-size: var(--strand-text-4xl);
	font-weight: var(--strand-weight-light);
	letter-spacing: var(--strand-tracking-tighter);
	line-height: var(--strand-leading-tight);
}

h2 {
	font-size: var(--strand-text-3xl);
	font-weight: var(--strand-weight-light);
	letter-spacing: var(--strand-tracking-tight);
	line-height: var(--strand-leading-snug);
}

/* Subheadings: medium weight, tight tracking, snug leading */
h3 {
	font-size: var(--strand-text-xl);
	font-weight: var(--strand-weight-medium);
	letter-spacing: var(--strand-tracking-tight);
	line-height: var(--strand-leading-snug);
}

h4 {
	font-size: var(--strand-text-lg);
	font-weight: var(--strand-weight-medium);
	line-height: var(--strand-leading-snug);
}

/* ── Code elements ── */
code,
pre {
	font-family: var(--strand-font-mono);
}

/* ── Focus Ring ── */
:focus-visible {
	outline: 2px solid var(--strand-blue-primary);
	outline-offset: 2px;
}

/* ── Selection ── */
::selection {
	background-color: var(--strand-blue-wash);
	color: var(--strand-blue-abyss);
}

/* ── Prose Width ── */
.strand-prose {
	max-width: 65ch;
}

/* ── Container ── */
.strand-container {
	max-width: var(--strand-content-full);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.strand-container-narrow {
	max-width: var(--strand-content-narrow);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.strand-container-default {
	max-width: var(--strand-content-default);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.strand-container-wide {
	max-width: var(--strand-content-wide);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* ── Section Rhythm ── */
.strand-section {
	padding-block: clamp(4rem, 8vw, 8rem);
}

.strand-section-hero {
	padding-block: clamp(6rem, 12vw, 12rem);
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--strand-surface-recessed);
}

::-webkit-scrollbar-thumb {
	background: var(--strand-gray-300);
	border-radius: var(--strand-radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--strand-gray-400);
}