/* ============================================================
   FONTS - self-hosted, local to this project (no external
   requests). Subset to latin + latin-ext only.
   ============================================================ */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   TOKENS - ported from the OppAlerts theme (opalerts.local /
   wp-content/themes/oa/style.css) so this guide matches the
   site's aesthetic while staying fully self-contained. Dark is
   the default; checking #theme-toggle-input switches to light.
   Persisted across pages via assets/js/app.js + localStorage.
   ============================================================ */
:root {
	/* layout */
	--topbar-h: 3.75rem;
	--sidebar-w: 19rem;
	--article-w: 38rem;
	--notes-w: 15rem;
	--content-gap: 3rem;
	--page-margin: 1.5rem;

	/* borders / radius */
	--border-width: 1px;
	--border-width-strong: 2px;
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;

	/* type families */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* type scale */
	--fs-2xs: 0.6875rem;
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.0625rem;
	--fs-lg: 1.375rem;
	--fs-xl: 1.75rem;
	--fs-2xl: 2.25rem;
	--fs-3xl: 3rem;

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-normal: 1.6;
	--lh-relaxed: 1.7;

	--tracking-wide: 0.08em;
	--tracking-wider: 0.12em;

	/* spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	/* color - neutrals (dark values live below; these are the
	   light-mode values, reused verbatim by the light override) */
	--color-bg: #FAFAF8;
	--color-bg-alt: #F2F3F2;
	--color-surface: #FFFFFF;
	--color-border: #E1E4E2;
	--color-border-strong: #CBD1CE;
	--color-text: #14181A;
	--color-text-muted: #565F5E;
	--color-text-faint: #8B9391;

	/* color - accent (restrained teal) */
	--color-accent: #2F6F68;
	--color-accent-strong: #1D4842;
	--color-accent-soft: #E6EFEC;

	--gradient-teal: linear-gradient(135deg, #0E3E3A 0%, #2F9E8F 100%);
	--gradient-teal-btn: linear-gradient(135deg, #1E5A52 0%, #2C8478 100%);

	--color-panel-dark: #12181A;
	--color-panel-dark-text: #D8E3E0;

	--shadow-card: 0 4px 16px rgba(20, 24, 26, 0.07);
	--shadow-soft: 0 2px 8px rgba(20, 24, 26, 0.05);
}

html { color-scheme: dark; }

/* dark is the default for everyone, same as the main site */
:root {
	--color-bg: #0E1416;
	--color-bg-alt: #171D1F;
	--color-surface: #1B2224;
	--color-border: #2B3436;
	--color-border-strong: #414D4F;
	--color-text: #ECEFED;
	--color-text-muted: #A6AEAC;
	--color-text-faint: #74807D;

	--color-accent: #5CC2B3;
	--color-accent-strong: #7FDCC8;
	--color-accent-soft: rgba(92, 194, 179, 0.16);

	--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.28);
	--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* checking the box switches to light */
html:has(#theme-toggle-input:checked) {
	color-scheme: light;

	--color-bg: #FAFAF8;
	--color-bg-alt: #F2F3F2;
	--color-surface: #FFFFFF;
	--color-border: #E1E4E2;
	--color-border-strong: #CBD1CE;
	--color-text: #14181A;
	--color-text-muted: #565F5E;
	--color-text-faint: #8B9391;

	--color-accent: #2F6F68;
	--color-accent-strong: #1D4842;
	--color-accent-soft: #E6EFEC;

	--shadow-card: 0 4px 16px rgba(20, 24, 26, 0.07);
	--shadow-soft: 0 2px 8px rgba(20, 24, 26, 0.05);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { overflow-x: hidden; }

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.mono { font-family: var(--font-mono); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-accent);
}

.eyebrow::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background: var(--gradient-teal);
	border-radius: 1px;
	flex-shrink: 0;
}