/*
 * OpenPress design system (foundation).
 * Order: 1 tokens · 2 themes · 3 reset · 4 typography · 5 layout utilities · 6 accessibility
 * Components are NOT defined here; they come in later tasks and should use semantic tokens (--op-bg, --op-text, ...).
 */

/* 1. Raw tokens (theme-independent) ------------------------------------- */
:root {
	/* Palette: deep ink + warm off-white + electric blue / violet */
	--op-black: #0B1020;          /* deep ink */
	--op-dark-surface: #131A2E;   /* raised ink surface */
	--op-dark-surface-2: #1A2340;
	--op-light: #F6F7FB;
	--op-white: #FFFFFF;
	--op-ink: #101828;
	--op-snow: #E8ECF6;           /* soft white text on ink */
	--op-gray: #667085;
	--op-gray-dark-mode: #A4AECA;
	--op-accent: #5B8DFF;         /* accent on dark */
	--op-blue: #2563EB;           /* electric blue on light */
	--op-violet: #7C3AED;
	--op-violet-soft: #A78BFA;
	--op-border-light: rgb(16 24 40 / 0.10);
	--op-border-dark: rgb(160 178 255 / 0.14);

	/* Font families. Manrope for headings, Inter for body. Both are used when installed
	   or self-hosted into assets/fonts; otherwise the system stack applies (no external requests). */
	--op-font-display: "Manrope", "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--op-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--op-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Font sizes (fluid, mobile -> desktop) */
	--op-text-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
	--op-text-lead: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
	--op-text-small: 0.9375rem;
	--op-text-meta: 0.875rem;
	--op-text-nav: 0.9375rem;
	--op-text-h4: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);
	--op-text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--op-text-h2: clamp(1.875rem, 1.45rem + 2vw, 3rem);
	--op-text-h1: clamp(2.5rem, 1.7rem + 4.2vw, 5rem);

	/* Line heights */
	--op-leading-tight: 1.08;
	--op-leading-snug: 1.25;
	--op-leading-body: 1.65;

	/* Weights */
	--op-weight-regular: 400;
	--op-weight-medium: 500;
	--op-weight-semibold: 600;
	--op-weight-bold: 700;
	--op-weight-heavy: 800;

	/* Letter spacing */
	--op-tracking-heading: -0.03em;

	/* Layout */
	--op-container: 1240px;
	--op-reading-width: 760px;
	--op-gutter: clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem);

	/* Spacing scale (fluid) */
	--op-space-1: 0.25rem;
	--op-space-2: 0.5rem;
	--op-space-3: 0.75rem;
	--op-space-4: 1rem;
	--op-space-5: 1.5rem;
	--op-space-6: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
	--op-space-7: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
	--op-space-8: clamp(4rem, 3rem + 4.5vw, 7rem);
	--op-section-space: clamp(4.5rem, 3.2rem + 5.5vw, 8.5rem);

	/* Radius scale: sm 8 / md 12 / lg 18 / xl 24 */
	--op-radius-xs: 6px;
	--op-radius-sm: 8px;
	--op-radius: 12px;
	--op-radius-lg: 18px;
	--op-radius-xl: 24px;
	--op-radius-pill: 999px;

	/* Gradients */
	--op-gradient: linear-gradient(120deg, var(--op-blue), var(--op-violet));
	--op-gradient-text: linear-gradient(100deg, #2563EB 0%, #7C3AED 100%);

	/* Motion */
	--op-ease: cubic-bezier(0.2, 0, 0, 1);
	--op-duration-fast: 120ms;
	--op-duration: 180ms;
	--op-transition: var(--op-duration) var(--op-ease);
	--op-lift: -3px;

	/* Controls and focus (shared by buttons, form fields, tabs) */
	--op-control-height: 2.75rem;
	--op-ring: 0 0 0 3px color-mix(in srgb, var(--op-focus) 32%, transparent);

	/* Breakpoints (reference only): tablet 768 · desktop 1024 · wide 1280 */
}

/* 2. Themes (semantic tokens) -------------------------------------------- */
/* Light is the default. Dark applies via system preference unless the user forces light,
   or when [data-theme="dark"] is set on <html>. */
:root {
	color-scheme: light;
	--op-bg: var(--op-light);
	--op-bg-elevated: var(--op-white);
	--op-bg-tint: #EEF1FA;                       /* soft tinted section */
	--op-bg-inverse: var(--op-black);
	--op-text: var(--op-ink);
	--op-text-muted: #596378;                    /* AA on #F6F7FB and #FFFFFF */
	--op-border: var(--op-border-light);
	--op-border-strong: rgb(16 24 40 / 0.22);
	--op-link: var(--op-blue);                   /* 5.2:1 on white */
	--op-accent-2: var(--op-violet);
	--op-focus: var(--op-blue);
	--op-success: #067647; --op-success-bg: #ECFDF3;
	--op-warning: #93370D; --op-warning-bg: #FFFAEB;
	--op-danger: #B42318;  --op-danger-bg: #FEF3F2;
	--op-glow: rgb(37 99 235 / 0.16);
	--op-glow-2: rgb(124 58 237 / 0.12);
	--op-grid-line: rgb(16 24 40 / 0.05);
	--op-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 1px rgb(16 24 40 / 0.03);
	--op-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 6px 16px -4px rgb(16 24 40 / 0.08);
	--op-shadow-lg: 0 2px 4px rgb(16 24 40 / 0.04), 0 18px 36px -10px rgb(37 60 140 / 0.18);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--op-bg: #0D1324;
		--op-bg-elevated: var(--op-dark-surface);
		--op-bg-tint: #101830;
		--op-bg-inverse: var(--op-light);
		--op-text: var(--op-snow);
		--op-text-muted: var(--op-gray-dark-mode);
		--op-border: var(--op-border-dark);
		--op-border-strong: rgb(160 178 255 / 0.3);
		--op-link: #7CA5FF;
		--op-accent-2: var(--op-violet-soft);
		--op-focus: #7CA5FF;
		--op-success: #47CD89; --op-success-bg: rgb(71 205 137 / 0.12);
		--op-warning: #FEC84B; --op-warning-bg: rgb(254 200 75 / 0.12);
		--op-danger: #F97066;  --op-danger-bg: rgb(249 112 102 / 0.12);
		--op-glow: rgb(91 141 255 / 0.2);
		--op-glow-2: rgb(167 139 250 / 0.14);
		--op-grid-line: rgb(160 178 255 / 0.06);
		--op-gradient-text: linear-gradient(100deg, #7CA5FF 0%, #B79CFF 100%);
		--op-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
		--op-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.5);
		--op-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 20px 40px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(124 165 255 / 0.06);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--op-bg: #0D1324;
	--op-bg-elevated: var(--op-dark-surface);
	--op-bg-tint: #101830;
	--op-bg-inverse: var(--op-light);
	--op-text: var(--op-snow);
	--op-text-muted: var(--op-gray-dark-mode);
	--op-border: var(--op-border-dark);
	--op-border-strong: rgb(160 178 255 / 0.3);
	--op-link: #7CA5FF;
	--op-accent-2: var(--op-violet-soft);
	--op-focus: #7CA5FF;
	--op-success: #47CD89; --op-success-bg: rgb(71 205 137 / 0.12);
	--op-warning: #FEC84B; --op-warning-bg: rgb(254 200 75 / 0.12);
	--op-danger: #F97066;  --op-danger-bg: rgb(249 112 102 / 0.12);
	--op-glow: rgb(91 141 255 / 0.2);
	--op-glow-2: rgb(167 139 250 / 0.14);
	--op-grid-line: rgb(160 178 255 / 0.06);
	--op-gradient-text: linear-gradient(100deg, #7CA5FF 0%, #B79CFF 100%);
	--op-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
	--op-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.5);
	--op-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 20px 40px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(124 165 255 / 0.06);
}

/* 3. Reset / base --------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background:
		radial-gradient(60rem 36rem at 85% -8%, var(--op-glow), transparent 70%),
		radial-gradient(48rem 30rem at -10% 4%, var(--op-glow-2), transparent 70%),
		var(--op-bg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	color: var(--op-text);
	font-family: var(--op-font-sans);
	font-size: var(--op-text-body);
	font-weight: var(--op-weight-regular);
	line-height: var(--op-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

figure {
	margin: 0;
}

a {
	color: var(--op-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: color-mix(in srgb, var(--op-link) 40%, transparent);
	transition: color var(--op-transition), text-decoration-color var(--op-transition);
}
a:hover { text-decoration-color: currentColor; }

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

hr {
	border: 0;
	border-top: 1px solid var(--op-border);
}

/* 4. Typography ------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
	margin: 0 0 var(--op-space-4);
	font-family: var(--op-font-display);
	font-weight: var(--op-weight-bold);
	letter-spacing: var(--op-tracking-heading);
	line-height: var(--op-leading-tight);
	text-wrap: balance;
}

h1 { font-size: var(--op-text-h1); font-weight: var(--op-weight-heavy); }
h2 { font-size: var(--op-text-h2); line-height: 1.12; }
h3 { font-size: var(--op-text-h3); line-height: var(--op-leading-snug); }
h4 { font-size: var(--op-text-h4); line-height: var(--op-leading-snug); letter-spacing: -0.01em; }

p {
	margin: 0 0 var(--op-space-4);
}

.op-gradient-text {
	background: var(--op-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

small,
.op-text-small {
	font-size: var(--op-text-small);
}

.op-text-muted {
	color: var(--op-text-muted);
}

/* 5. Layout utilities ------------------------------------------------------ */
.op-container {
	width: 100%;
	max-width: calc(var(--op-container) + 2 * var(--op-gutter));
	margin-inline: auto;
	padding-inline: var(--op-gutter);
}

.op-reading {
	max-width: var(--op-reading-width);
	margin-inline: auto;
}

.op-section {
	padding-block: var(--op-section-space);
}

.op-surface {
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
	box-shadow: var(--op-shadow-sm);
}

/* 6. Accessibility --------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--op-focus); /* full-strength colour: the 70% mix measured 2.92:1 in light mode (needs 3:1) */
	outline-offset: 3px;
	border-radius: var(--op-radius-sm);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.skip-link:focus {
	position: fixed;
	top: var(--op-space-3);
	left: var(--op-space-3);
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--op-space-3) var(--op-space-4);
	clip-path: none;
	background: var(--op-bg-elevated);
	color: var(--op-text);
	box-shadow: var(--op-shadow);
	border-radius: var(--op-radius);
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* 059: keep keyboard focus clear of the sticky header (WCAG 2.2, 2.4.11 Focus Not Obscured).
   The header is sticky (3.5rem tall on mobile, 4.5rem on desktop). Without an offset, tabbing or shift-tabbing
   to an element near the top edge can leave it hidden underneath. The offset is set on the focusable elements,
   not on <html>, so existing heading scroll offsets (scroll-margin-top: 6rem on content headings) are not doubled. */
a[href],
button,
input,
select,
textarea,
summary,
[tabindex]:not([tabindex="-1"]) {
	scroll-margin-top: 5.5rem;
}
#content { scroll-margin-top: 4.5rem; }