/*
 * VoltNiq — Design tokens.
 * Loaded first, everywhere. All other CSS consumes these custom properties.
 * Concept: dark instrument-panel aesthetic with one high-voltage accent.
 */

:root {
	/* --- Colour: surfaces & text -------------------------------------- */
	--c-bg: #0B0F14;          /* near-black, faint blue cast */
	--c-surface: #121821;     /* cards, panels */
	--c-surface-2: #1A2230;   /* raised elements, table header rows */
	--c-line: #263243;        /* hairline borders */
	--c-text: #E8EDF2;        /* primary text */
	--c-text-dim: #9AA7B4;    /* secondary / spec labels */

	/* --- Colour: signature accent ("live current") -------------------- */
	--c-volt: #36F1B3;        /* charged mint-green */
	--c-volt-deep: #0FB488;   /* accent pressed/hover */

	/* --- Colour: state ------------------------------------------------ */
	--c-amber: #FFB020;       /* compatibility cautions ONLY */
	--c-danger: #FF5C5C;      /* errors, out of stock */
	--c-ok: var(--c-volt);    /* compatible / in stock / certified */

	/* Accent text-on-accent (volt is light, needs dark text on it) */
	--c-on-volt: #04130D;

	/* --- Typography: families ----------------------------------------- */
	--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* --- Typography: fluid scale (1.250 major third) ------------------ */
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;          /* 16px floor for body */
	--fs-md: 1.25rem;
	--fs-lg: 1.563rem;
	--fs-xl: 1.953rem;
	--fs-2xl: 2.441rem;
	--fs-3xl: clamp(2.6rem, 5vw, 3.815rem);  /* hero only */

	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-base: 1.6;

	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* --- Spacing scale (4px base) ------------------------------------- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	/* --- Radius ------------------------------------------------------- */
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--r-pill: 999px;

	/* --- Widths ------------------------------------------------------- */
	--w-content: 1200px;
	--w-prose: 72ch;
	--gutter: var(--sp-4);

	/* --- Elevation / focus -------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
	--focus-ring: 0 0 0 3px rgba(54, 241, 179, 0.45);

	/* --- Motion ------------------------------------------------------- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast: 140ms;
	--dur-base: 240ms;

	/* --- Layering ----------------------------------------------------- */
	--z-header: 100;
	--z-overlay: 200;
	--z-sticky: 150;
}