/*
 * IQ Construct — design tokens. The single source of truth.
 *
 * Identity (approved M1): Manrope headings / Inter body, brand red #7C0B0B with
 * #480404 for pressed states and #020000 for the two dark bands. Everything else
 * is white and neutral grey — no second accent, and the interface never goes
 * dark as a whole. Red is spent only on the "Solicită ofertă" CTA, active states,
 * links and small meaningful accents.
 *
 * RULE: no colour, size, font or duration may be hardcoded anywhere else in this
 * theme. If a value is needed and is not here, it gets added here first.
 */

:root {
	/* ── Brand ────────────────────────────────────────────────────────────── */
	--iq-red:       #7C0B0B; /* primary CTA, active, links — 9.4:1 on white */
	--iq-red-deep:  #480404; /* hover / pressed */
	--iq-black:     #020000; /* dark bands, inverted grounds */

	/* ── Colour ───────────────────────────────────────────────────────────── */
	--iq-ground:       #FFFFFF; /* page ground */
	--iq-ground-sunk:  #F4F4F5; /* recessed sections, spec-table stripes */
	--iq-surface:      #FFFFFF; /* cards */
	--iq-ink:          #17181A; /* headings and body */
	--iq-graphite:     #5C5F63; /* secondary text, meta — 6.5:1 on white */
	--iq-quiet:        #9A9DA1; /* disabled, placeholders — never body text */
	--iq-rule:         #E4E4E7; /* hairlines */

	/* The one signal colour. Names kept from the previous token layer so the
	   whole component layer keeps resolving; only the values changed. */
	--iq-signal:       var(--iq-red);
	--iq-signal-deep:  var(--iq-red-deep);
	/* Red sinks into an ink band, so inverted contexts use white for the same
	   role and rely on weight and underline instead of hue. */
	--iq-signal-light: #FFFFFF;
	--iq-warn:         #B3261E; /* form errors only */

	/* Inverted contexts (projects band, quote band). */
	--iq-inv-ground:   var(--iq-black);
	--iq-inv-text:     #FFFFFF;
	--iq-inv-muted:    rgba(255, 255, 255, .66);
	--iq-inv-rule:     rgba(255, 255, 255, .20);

	/* ── Type ─────────────────────────────────────────────────────────────── */
	--iq-font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--iq-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* Labels and eyebrows are Inter with wide tracking rather than a third face. */
	--iq-font-mono:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Manrope carries no width axis; the token stays so the component layer can
	   keep referencing font-stretch without special-casing. */
	--iq-display-stretch: 100%;

	/* Controlled and responsive: every step clamps between two real pixel sizes,
	   so nothing is driven by the viewport alone. */
	--iq-size-display-xl: clamp(34px, 3.6vw, 52px);
	--iq-size-display-l:  clamp(28px, 2.8vw, 40px);
	--iq-size-h2:         clamp(26px, 2.5vw, 36px);
	--iq-size-h3:         clamp(21px, 1.7vw, 24px);
	--iq-size-h4:         clamp(18px, 1.4vw, 20px);
	--iq-size-h5:         17px;
	--iq-size-h6:         15px;
	--iq-size-body-lg:    18px;
	--iq-size-body:       16px;
	--iq-size-small:      14px;
	--iq-size-mono:       13px; /* eyebrows, tabs, labels */
	--iq-size-mono-micro: 12px;

	--iq-leading-display: 1.10;
	--iq-leading-tight:   1.18;
	--iq-leading-body:    1.65;

	--iq-track-display:  -.02em;
	--iq-track-mono:     .08em;

	--iq-weight-heading: 600;
	--iq-weight-strong:  700;
	--iq-weight-medium:  500;

	/* ── Space — 4px base ─────────────────────────────────────────────────── */
	--iq-space-1:  4px;
	--iq-space-2:  8px;
	--iq-space-3:  12px;
	--iq-space-4:  16px;
	--iq-space-6:  24px;
	--iq-space-8:  32px;
	--iq-space-12: 48px;
	--iq-space-16: 64px;
	--iq-space-24: 96px;
	--iq-space-32: 128px;

	--iq-section: clamp(64px, 7vw, 112px);
	--iq-container: 1392px;
	/* 16px floor keeps 320px viewports readable. */
	--iq-gutter: clamp(16px, 4vw, 32px);

	--iq-header-utility: 36px;
	--iq-header-bar:     72px;
	--iq-header-bar-sm:  60px;

	/* ── Form ─────────────────────────────────────────────────────────────── */
	/* Radius encodes the edge: 0 on anything representing material (a cut edge
	   is square), 2px on controls so they read as UI rather than as stone. */
	--iq-radius-material: 0;
	--iq-radius-control:  2px;

	/* Card and tile proportions. */
	--iq-ratio-slab: 2 / 1;
	--iq-ratio-card: 4 / 5;
	--iq-ratio-tile: 1 / 1;
	--iq-ratio-wide: 16 / 9;

	--iq-hit: 44px; /* minimum touch target */

	/* ── Depth ────────────────────────────────────────────────────────────── */
	/* No shadows in the resting UI: depth comes from the sunk ground and
	   hairlines. These two exist only for the sticky header and the drawer. */
	--iq-shadow-sticky: 0 1px 0 rgba(2, 0, 0, .08);
	--iq-shadow-float:  0 8px 32px rgba(2, 0, 0, .16);

	/* ── Motion ───────────────────────────────────────────────────────────── */
	--iq-ease:       cubic-bezier(.22, .61, .36, 1);
	--iq-dur-micro:  150ms;
	--iq-dur-reveal: 300ms;
	--iq-dur-draw:   350ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--iq-dur-micro:  1ms;
		--iq-dur-reveal: 1ms;
		--iq-dur-draw:   1ms;
	}
}