/* ==========================================================================
   Design tokens + global utility classes.
   Reuse tokens and utilities everywhere — component CSS holds unique styles only.
   All spacing / sizing values are even numbers.
   ========================================================================== */

:root {
	/* --- palette (dark terminal) --- */
	--color-bg: #0B0E14;
	--color-panel: #11141C;
	--color-panel-hover: #1B2130;
	--color-line: #1B2130;
	--color-text: #C9D1D9;
	--color-text-muted: #6B7280;
	--color-accent: #4ADE80;
	--color-accent-secondary: #56D4DD;
	--color-accent-warm: #E3B341;
	--color-dot-red: #FF5F56;
	--color-dot-yellow: #FFBD2E;
	--color-dot-green: #27C93F;

	/* --- monokai tokens (demo / config) --- */
	--color-mono-key: #F92672;
	--color-mono-string: #E6DB74;
	--color-mono-func: #A6E22E;
	--color-mono-comment: #75715E;
	--color-mono-base: #F8F8F2;

	/* --- typography --- */
	--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-md: 16px;
	--font-size-lg: 20px;
	--font-size-xl: 24px;
	--font-size-2xl: 32px;
	--font-size-3xl: 44px;
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--line-height-tight: 1.2;
	--line-height-base: 1.6;

	/* --- spacing --- */
	--space-2: 2px;
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-64: 64px;
	--space-80: 80px;

	/* --- radii --- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* --- composite declarations (full token, not just values) --- */
	--border-default: 1px solid var(--color-line);
	--border-strong: 1px solid var(--color-panel-hover);
	--border-accent: 1px solid var(--color-accent);

	/* --- layout --- */
	--container-max: 960px;
	--container-wide: 1120px;

	/* --- motion --- */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;

	/* --- shadows / glow --- */
	--shadow-window: 0 16px 48px rgba(0, 0, 0, 0.5);
	--glow-accent: 0 0 0 1px var(--color-accent), 0 0 24px rgba(74, 222, 128, 0.22);
}

/* --- layout utilities (display: flex / grid live here, never in components) --- */
.u-flex { display: flex; }
.u-flex-col { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-grid { display: grid; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-center { justify-content: center; }
.u-gap-4 { gap: var(--space-4); }
.u-gap-8 { gap: var(--space-8); }
.u-gap-12 { gap: var(--space-12); }
.u-gap-16 { gap: var(--space-16); }
.u-gap-24 { gap: var(--space-24); }
.u-gap-32 { gap: var(--space-32); }
.u-text-center { text-align: center; }
.u-grow { flex-grow: 1; }

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