/* VelartAuto design tokens. Colour: exactly two — graphite and warm white (client, 10.2026). Lines, surfaces, muted text
   and states are the transparency of these two; photos bring the colour. No accent colour, no third hue. See DESIGN.md. */
:root {
	/* colour: two bases + their RGB channels for transparency (rgb(var(--va-ink-c) / .5)) */
	--va-ink: #141516;
	--va-paper: #eeece7;
	--va-ink-c: 20 21 22;
	--va-paper-c: 238 236 231;

	/* type */
	--va-font-display: 'Oswald', 'Arial Narrow', sans-serif;
	--va-font-accent: 'Oswald', 'Arial Narrow', sans-serif; /* accent = same family, light weight, no italic */
	--va-font-text: 'Golos Text', system-ui, -apple-system, sans-serif;
	--va-fw-display: 600;   /* caps headings */
	--va-fw-accent: 300;    /* accent word inside a heading: bold/light contrast */
	--va-fs-mega: clamp(50px, 10.2vw, 196px);
	--va-fs-h1: clamp(38px, 6vw, 112px);
	--va-fs-h2: clamp(30px, 3.9vw, 68px);
	--va-fs-h3: clamp(22px, 1.8vw, 30px);
	--va-fs-lead: clamp(18px, 1.45vw, 22px);
	--va-fs-body: 17px;
	--va-fs-small: 14px;
	--va-fs-micro: 12px;

	/* space & layout */
	--va-gutter: clamp(16px, 3.6vw, 56px);
	--va-col-gap: clamp(12px, 1.6vw, 24px);
	--va-maxw: 1680px;
	--va-section-y: clamp(80px, 11vw, 176px);
	--va-head-gap: clamp(32px, 4vw, 64px);   /* section head → its content, everywhere */
	--va-tile-gap: 12px;                      /* bento tiles, photo grids */
	--va-tile-row: clamp(180px, 15vw, 260px); /* bento row height (grows with content, equal across a row) */
	--va-card-gap: clamp(36px, 3.4vw, 56px) var(--va-col-gap); /* car-card grids: row gap, column gap */
	--va-s1: 4px; --va-s2: 8px; --va-s3: 12px; --va-s4: 16px; --va-s5: 24px; --va-s6: 32px; --va-s7: 48px; --va-s8: 72px;
	--va-radius: 6px;
	--va-radius-lg: 18px;
	--va-pill: 999px;
	--va-header-h: 64px;
	--va-bar-space: 104px; /* room kept under the bottom capsule */

	/* motion */
	--va-ease-out: cubic-bezier(.16, 1, .3, 1);
	--va-ease-in-out: cubic-bezier(.76, 0, .24, 1);
	--va-dur-fast: .25s;
	--va-dur: .6s;
	--va-dur-slow: 1.2s;

	/* scheme defaults (paper) — sections override --bg --fg --fg-c; the rest derives below */
	--bg: var(--va-paper);
	--fg: var(--va-ink);
	--fg-c: var(--va-ink-c);
}

/* schemes: background + text; ink-2 / paper-2 are a 4 % veil of the other colour, not a new hue */
.va-section--ink, .va-scheme-ink, .menu-grid { --bg: var(--va-ink); --fg: var(--va-paper); --fg-c: var(--va-paper-c); }
.va-section--ink-2 { --bg: color-mix(in srgb, var(--va-paper) 4%, var(--va-ink)); --fg: var(--va-paper); --fg-c: var(--va-paper-c); }
.va-section--paper, .va-scheme-paper { --bg: var(--va-paper); --fg: var(--va-ink); --fg-c: var(--va-ink-c); }
.va-section--paper-2 { --bg: color-mix(in srgb, var(--va-ink) 4%, var(--va-paper)); --fg: var(--va-ink); --fg-c: var(--va-ink-c); }

/* derived from the text colour of the block (re-declared on every scheme so var() resolves per block):
   --mute 64 % (5.2:1 on paper, 7:1 on ink), --line 14 %, --surface 5 %; errors speak in text, not in red */
:root, .va-section--ink, .va-scheme-ink, .menu-grid, .va-section--ink-2, .va-section--paper, .va-scheme-paper, .va-section--paper-2 {
	--mute: rgb(var(--fg-c) / .64);
	--line: rgb(var(--fg-c) / .14);
	--surface: rgb(var(--fg-c) / .05);
	--err: var(--fg);
}