/* ==========================================================================
   Cẩm Nang Lexus Việt Nam — design tokens
   V3.1 · "THƯỚC ĐO", tối và có ánh kim.

   V3 kept the right structure — the price scale as the spine — but sat on a
   light pewter ground and read flat and inexpensive. In this category "sang"
   means deep, not bright: a car is shown in a dark room with light raked
   across the paint. So the ground drops to onyx, the type grows, and a
   specular layer is added so surfaces catch light instead of sitting matte.

   Palette is still Lexus' own paint vocabulary. The accent moves from
   Structural Blue — correct but cold, and it read as tech rather than luxury —
   to Copper Crest, which is warm and expensive and equally real.

   Ratios are MEASURED. Re-measure before changing a pair.
   ========================================================================== */

:root{
	/* ── Ground: a dark room, not a dark theme ──────────────────────────
	   Three steps, close together. Luxury reads in small tonal moves; a hard
	   black-to-white flip reads as a template. */
	--onyx:     #0B0C0E;   /* page ground */
	--graphite: #15171B;   /* raised band, panels */
	--slate:    #1E2127;   /* wells, hovers, inset rows */

	/* ── Text ───────────────────────────────────────────────────────────── */
	--platinum: #E9EAEE;   /* 16.28:1 on --onyx · AAA */
	--silver:   #A7ADB8;   /*  8.68:1 on --onyx · AAA — secondary prose */
	/* Lightened from #767D89, which measured 4.72:1 on --onyx but only 4.33:1
	   on --graphite — and the footer and the comparison band are graphite, so
	   the small print there was failing AA. Checked against all three grounds
	   now, not just the darkest one. */
	--steel:    #828A97;   /*  5.62:1 onyx · 5.15:1 graphite · 4.63:1 slate · AA */

	/* ── Accent: Copper Crest ───────────────────────────────────────────── */
	--copper:      #D99A5B;   /* 8.13:1 on --onyx · AAA */

	/* Hover chỉ nhích lên một bậc. Tách khỏi --copper vì nó là trạng thái,
	   không phải màu nhấn — đổi màu nhấn không nên tự động đổi hover. */
	--copper-lift: #E7B072;

	/* ── Chrome: kim loại đánh bóng ─────────────────────────────────────
	   Không phải gradient cho có. Nẹp chrome là thứ những chiếc xe này được
	   làm ra, nên dải sáng đi sáng → tối → chói → tối → sáng đúng cách một
	   mặt chrome cong phản chiếu căn phòng.

	   Điểm tối nhất là #7D8595, đo được 5.28:1 trên --onyx, nên ngay cả dải
	   bóng của gradient vẫn đạt AA cho chữ cỡ thường. Đo lại trước khi đổi. */
	--grad-chrome:      linear-gradient(177deg,
	                      #FFFFFF 0%, #D6DCE6 16%, #7D8595 34%,
	                      #F4F7FB 50%, #8A93A3 64%, #D6DCE6 84%, #FFFFFF 100%);
	/* Copper là màu nhấn, nên dải chrome của nó ấm chứ không trung tính. */
	--grad-chrome-warm: linear-gradient(177deg,
	                      #FFE7CE 0%, #E7B072 16%, #9A6430 34%,
	                      #FFDDB8 50%, #A97442 64%, #E7B072 84%, #FFE7CE 100%);

	/* ── Trạng thái lỗi của form ────────────────────────────────────────── */
	--err:      #F0A9A0;
	--err-line: #C4675C;

	/* ── The specular layer — this is the "bóng bảy" ────────────────────
	   Flat fills are what made V3 look cheap. Every raised surface gets a light
	   source: a top edge catching it, a diagonal sheen falling off, and a warm
	   shadow underneath. Drawn in CSS, no images. */
	--edge:      inset 0 1px 0 rgba(255,255,255,0.07);
	--edge-soft: inset 0 1px 0 rgba(255,255,255,0.045);
	--sheen:     linear-gradient(158deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.012) 34%, transparent 62%);
	--sheen-warm:linear-gradient(158deg, rgba(217,154,91,0.10) 0%, rgba(217,154,91,0.02) 40%, transparent 70%);

	--shadow:    0 26px 60px -30px rgba(0,0,0,0.85);

	--line:        rgba(233,234,238,0.10);
	--line-strong: rgba(233,234,238,0.20);

	/* ── Type ───────────────────────────────────────────────────────────
	   Bigger than V3 across the board. A condensed face at a timid size just
	   looks narrow; at this scale it looks deliberate. All three faces verified
	   to carry U+1EA0-1EF9 — check any new one with a FULL desktop User-Agent
	   or Google returns a legacy sheet with no unicode-range. */
	--f-display: 'Saira Condensed', 'IBM Plex Sans', system-ui, sans-serif;
	--f-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--t-xl:    clamp(2.3rem, 5.2vw, 4.6rem);
	--t-m:     clamp(1.12rem, 1.4vw, 1.34rem);
	--t-body:  clamp(1.02rem, 1.05vw, 1.12rem);
	--t-s:     0.95rem;
	--t-xs:    0.78rem;
	/* Riêng cho thanh điều hướng. --t-xs quá nhỏ cho một hàng chữ mono in
	   hoa có giãn cách: ở 0.78rem nó đọc như chú thích chứ không như điều
	   hướng chính. --t-s thì đẩy năm mục thành quá rộng ở 1024px. */
	--t-nav:   0.84rem;

	/* Condensed sets tight, but Vietnamese stacks marks above cap-height, so
	   1.02 is the floor at mega size — and it is why the reveal mask needs
	   headroom, see base.css. */
	--lh-display: 1.03;
	--lh-body:    1.72;

	--track-mega: -0.022em;   /* tighter at size: expensive, not cramped */
	--track-lab:  0.18em;     /* looser on small caps: the instrument's voice */

	/* ── Space ──────────────────────────────────────────────────────────── */
	--container: 1440px;
	--gutter:    clamp(20px, 4.4vw, 76px);
	--band:      clamp(88px, 11vw, 184px);

	/* ── The scale ──────────────────────────────────────────────────────
	   The one declaration of the range. main.js reads these rather than keeping
	   its own copy: the rail marker and the hero ticks have to agree, and two
	   hardcoded copies are how they quietly stop agreeing when prices move. */
	--scale-floor: 2360000000;
	--scale-ceil:  9700000000;
	--tick:        1px;
	--rail-w:      2px;

	/* ── Motion: weighted. These objects have mass; nothing springs. ────── */
	--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
	--dur-fast: 0.3s;
}