@font-face {
	font-family: 'MuseoModerno';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("museomoderno-500.3f1d46713580.woff2") format('woff2');
}

@font-face {
	font-family: 'MuseoModerno';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("museomoderno-600.b3345fab326b.woff2") format('woff2');
}

@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("fonts/dm-sans.7c87a648293f.woff2") format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url("fonts/ibm-plex-sans.b2c9031d9fd6.woff2") format('woff2');
}

/* ═══════════════════════════════════════════════════════════
   THEME VARIABLES  —  light (default)  /  dark (override)
═══════════════════════════════════════════════════════════ */

:root {
	font-size: 13pt;
	/* backgrounds */
	--bg:       #f5f7fa;
	--bg2:      #eaecf1;
	--bg3:      #dde1e7;
	--surface:  #d3d8e2;
	--surface2: #c8ceda;
	--sidebar-bg: #e2e6ed;
	/* borders */
	--border:        rgba(0,0,0,0.09);
	--border2:       rgba(0,0,0,0.16);
	--border-dashed: rgba(0,0,0,0.20);
	/* text */
	--text:  #0d1117;
	--muted: #3e4d62;
	--dim:   #5c6b7d;
	/* accents */
	--green:     #007a56;
	--green-dim: rgba(0,122,86,0.10);
	--amber:     #b45309;
	--amber-dim: rgba(180,83,9,0.10);
	--blue:      #1d4ed8;
	/* misc */
	--hover-bg: rgba(0,0,0,0.05);
	--bg-glass: rgba(245,247,250,0.92);
	--mono: 'DM Sans', system-ui, sans-serif;
	--sans: 'IBM Plex Sans', system-ui, sans-serif;
	--w: 1280px;
	--grid-z: -1;
}

[data-theme="dark"] {
	--bg:       #0d0f12;
	--bg2:      #111418;
	--bg3:      #161b22;
	--surface:  #1a2030;
	--surface2: #1f2637;
	--sidebar-bg: #090b0e;
	--border:        rgba(255,255,255,0.09);
	--border2:       rgba(255,255,255,0.16);
	--border-dashed: rgba(255,255,255,0.22);
	--text:  #e8edf5;
	--muted: #9daab8;
	--dim:   #8f98a8;
	--green:     #00d084;
	--green-dim: rgba(0,208,132,0.12);
	--amber:     #f5a623;
	--amber-dim: rgba(245,166,35,0.12);
	--blue:      #4d9fff;
	--hover-bg: rgba(255,255,255,0.05);
	--bg-glass: rgba(13,15,18,0.82);
}

/* ── Dot grid overlay ───────────────────────────────────── */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px);
	background-size: 28px 28px;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: var(--grid-z);
}

[data-theme="dark"] body::before {
	background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
	mix-blend-mode: screen;
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--sans);
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
}

/* ── Buttons ───────────────────────────────────────────── */
.button, .button-green {
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 8px 18px;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.1s;
	display: inline-block;
	color: var(--text);
	border: 2px solid var(--border2);
	border-radius: 3px;
	text-decoration: none;
}

.button-green {
	background: var(--green);
	color: #fff;
	border-color: var(--green);
}

.button:hover, .button-green:hover {
	opacity: 0.88;
	transform: translateY(-2px);
}

.button:hover {
	border-color: var(--green);
	color: var(--green);
}

/* ── Theme toggle ──────────────────────────────────────── */
.theme-toggle {
	font-family: var(--mono);
	font-size: 0.7rem;
	color: var(--dim);
	background: transparent;
	border: 1px solid var(--border2);
	border-radius: 3px;
	padding: 5px 11px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	white-space: nowrap;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.theme-toggle:hover {
	color: var(--text);
	border-color: var(--green);
	background: var(--hover-bg);
}

svg.icon {
	fill: currentColor;
	flex-shrink: 0;
}

.theme-toggle svg.icon {
	width: 13px;
	height: 13px;
	vertical-align: -1px;
	display: inline;
}

/* ── Form elements ─────────────────────────────────────── */
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
	box-sizing: border-box;
	background: var(--bg3);
	color: var(--text);
	border: 1px solid var(--border2);
	border-radius: 3px;
	font-family: var(--mono);
	font-size: 0.82rem;
	padding: 10px 13px;
	width: 100%;
	transition: border-color 0.15s, box-shadow 0.15s;
	outline: none;
}

input[type="radio"], input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--green);
}

input:not([type="radio"]):not([type="checkbox"]):focus, select:focus, textarea:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 3px var(--green-dim);
}

input::placeholder, textarea::placeholder {
	color: var(--dim);
	opacity: 0.7;
}

/* Autofill — light (default) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #dde1e7 inset !important;
	-webkit-text-fill-color: #0d1117 !important;
	caret-color: #0d1117;
}

/* Autofill — dark */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #161b22 inset !important;
	-webkit-text-fill-color: #e8edf5 !important;
	caret-color: #e8edf5;
}

select option { background: var(--bg3); color: var(--text); }

textarea { resize: vertical; line-height: 1.65; min-height: 120px; }

/* ── Form groups & validation ──────────────────────────── */
label {
	display: block;
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--muted);
	margin-bottom: 7px;
	letter-spacing: 0.01em;
}

.form-group { margin-bottom: 16px; }

.form-row.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 480px) {
	.form-row.two-col { grid-template-columns: 1fr; }
}

.field-error {
	font-family: var(--mono);
	font-size: 0.72rem;
	color: #e05252;
	margin-top: 5px;
	min-height: 1.1em;
}

.req { color: var(--green); font-weight: 600; }

/* ── Logo SVG ───────────────────────────────────────────── */
.logo-svg {
	height: 43px;
	width: auto;
	display: block;
}
[data-theme="dark"] .logo-svg text { fill: #e8edf5; }
[data-theme="dark"] .logo-svg line,
[data-theme="dark"] .logo-svg path { stroke: #9ca3af; fill: #9ca3af; }
.logo-svg--on-dark text { fill: #e8edf5; }
.logo-svg--on-dark line,
.logo-svg--on-dark path { stroke: #9ca3af; fill: #9ca3af; }

/* ── Utility ───────────────────────────────────────────── */
.mono  { font-family: var(--mono); }
.dim   { color: var(--dim); }
.amber { color: var(--amber); }
.green { color: var(--green); }