/*
 * Vantrell V1 — design tokens. Every colour, typeface, size, duration, easing,
 * delay, breakpoint, z-index and pin length on the site lives here; site.css
 * and site.js only reference these (--s-*). JS reads them via getComputedStyle.
 */
@font-face {
    font-family: "Geist";
    src: url("fonts/Geist-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist Mono";
    src: url("fonts/GeistMono-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── palette: WARM graphite (raw carbon under workshop light, not blue-black),
       warm titanium linework, one signal colour ── */
    --s-graphite: #13110f;          /* page */
    --s-carbon: #1b1916;            /* lifted panel (hero lower band, plates) */
    --s-carbon-hi: #23201c;         /* plate on carbon, inputs */
    --s-carbon-line: #332f2a;       /* hairline rules, column guides */
    --s-carbon-line-hi: #48423b;    /* stronger hairline, taken slots */
    --s-titanium: #e2ded6;          /* text + linework (13:1 on carbon) */
    --s-titanium-dim: #aaa398;      /* secondary text AND every informational label (7.0:1 on carbon, 6.5:1 on carbon-hi) */
    --s-titanium-soft: #776f65;     /* strokes only — never text (3.5:1) */
    --s-lime: #c6ff00;              /* ONLY: live marker, live values, CTA fill */
    --s-lime-ink: #13110f;          /* text on lime */
    --s-lime-wash: #c6ff0024;       /* the run trail under the marker */
    --s-warn: #ff7a38;              /* the ONE warning use: form errors (7.4:1) */
    --s-white: #ffffff;
    --s-black: #000000;
    --s-shadow: #000000;
    --s-nav-bg: #13110fe6;
    --s-lime-hover: #d6ff4a;
    --s-quiet-hover: #2e2a25;
    /* carbon twill: two fine diagonal weaves, laid over plates that carry drawings */
    --s-weave: repeating-linear-gradient(45deg, #ffffff06 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, #0000002e 0 2px, transparent 2px 5px);

    /* car paint: the hero body and the configurator finishes */
    --s-hero-body: #3a3631;
    --s-hero-interior: #5a534b;
    --s-glass: #0a0908;
    --s-finish-argent: #a9afb5;
    --s-finish-obsidian: #1d2025;
    --s-finish-polar: #e4e6e8;
    --s-finish-fjord: #2f4a4d;
    --s-finish-oxide: #6d2c22;
    --s-interior-ash: #8a8f95;
    --s-interior-char: #2a2c30;
    --s-interior-sand: #b79d7c;
    --s-tyre: #0c0b0a;
    --s-tyre-wall: #1d1b18;
    --s-well: #070605;              /* the dark barrel seen between spokes */
    --s-rim: #070605;
    --s-carbon-fibre: #0f0e0c;      /* splitter, rocker, diffuser, mirror blade */
    --s-metal-hi: #b9b4ab;          /* forged wheel face, light side */
    --s-metal: #77726a;
    --s-metal-lo: #34312c;
    --s-disc: #3f3b36;
    --s-disc-vent: #1a1815;
    --s-caliper: #8a8277;
    --s-lamp: #c23a2c;              /* tail-light bar */

    /* paint shading: how far each stop mixes toward light or dark */
    --s-paint-hi-mix: 80%;
    --s-paint-mid-mix: 100%;
    --s-paint-lo-mix: 42%;
    --s-paint-sheen-alpha: 0.12;
    --s-sky-alpha: 0.24;           /* upper surfaces: bonnet, roof, deck catch the sky */
    --s-tuck-alpha: 0.62;          /* lower body tucks into shadow */
    --s-haunch-alpha: 0.2;
    --s-flank-alpha: 0.22;         /* the shadowed lower door plane under the blade */
    --s-blade-alpha: 0.1;          /* the door blade standing proud, catching light */
    --s-reveal-alpha: 0.55;        /* the shadow the blade casts on the flank */
    --s-sill-alpha: 0.4;           /* the body's shadow on the carbon rocker */
    --s-scoop-alpha: 0.9;          /* depth of the side intake at its back wall */
    --s-spec-alpha: 0.7;           /* specular streak on the shoulder */
    --s-glass-band-alpha: 0.07;
    --s-stroke-spec: 2.5px;
    --s-hatch-stroke: 3;            /* user units on the exploded sheet (not px) */
    --s-dash-centre: 14 4 2 4;      /* engineering centre line: long-short */
    --s-dash-hidden: 4 4;           /* hidden detail line */
    --s-shadow-alpha: 0.72;
    --s-reflection-alpha: 0.2;
    --s-line-soft-alpha: 0.5;
    --s-guide-alpha: 0.55;
    --s-dim-alpha: 0.26;           /* other layers while one is being read: low enough that the frames differ at a glance */
    --s-layer-pop-x: -150;         /* the layer being read slides out of the stack (drawing units, mm) */
    --s-layer-pop-y: -40;

    /* ── type ── */
    --s-font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --s-font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --s-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --s-step-hero: clamp(2.6rem, min(7.4vw, 12.4svh), 7.5rem);
    --s-step-h2: clamp(2rem, 4.4vw, 4.25rem);
    --s-step-h3: clamp(1.3rem, 2vw, 1.75rem);
    --s-step-lede: clamp(1.02rem, 1.25vw, 1.2rem);
    --s-step-body: 1rem;
    --s-step-small: 0.875rem;
    --s-step-mono: 0.875rem;
    --s-step-micro: 0.875rem;       /* type floor: no informational label below 14px */
    --s-step-plate: clamp(3.4rem, 6.4vw, 6.25rem);
    --s-step-readout: clamp(3.6rem, 9vw, 8.75rem);
    --s-step-fig: clamp(2.4rem, 3.6vw, 3.4rem);
    --s-step-quote: clamp(1.45rem, 2.7vw, 2.35rem);
    --s-step-callout: clamp(0.78125rem, 0.85vw, 0.8125rem);
    --s-step-xlabel: clamp(0.78125rem, 0.9vw, 0.875rem);
    --s-step-slot: clamp(0.78125rem, 2.6vw, 0.8125rem);
    --s-step-run-sm: clamp(2.5rem, 12vw, 3.5rem);
    --s-step-fig-sm: clamp(1.9rem, 8vw, 2.4rem);
    --s-step-wordmark: 1.2rem;
    --s-step-sheet: clamp(1.6rem, 7vw, 2.2rem);
    --s-weight-display: 600;
    --s-weight-body: 400;
    --s-weight-strong: 550;
    --s-track-display: -0.045em;
    --s-track-h2: -0.035em;
    --s-track-mono: 0.01em;
    --s-track-readout: -0.09em;
    --s-track-wordmark: -0.02em;
    --s-leading-display: 0.94;
    --s-leading-tight: 1.08;
    --s-leading-body: 1.55;

    /* ── space + layout ── */
    --s-gutter: clamp(16px, 4vw, 56px);
    --s-max: 1440px;
    --s-col-gap: clamp(12px, 1.6vw, 24px);
    --s-section: clamp(72px, 10vw, 144px);
    --s-section-gap: clamp(64px, 8vw, 112px);  /* the space between two sections: one value, never stacked */
    --s-space-3xs: 4px;
    --s-space-2xs: 8px;
    --s-space-xs: 12px;
    --s-space-s: 16px;
    --s-space-m: 24px;
    --s-space-l: 36px;
    --s-space-xl: 56px;
    --s-space-2xl: 88px;
    --s-nav-h: 64px;
    --s-nav-h-sm: 56px;
    --s-ribbon-h: 34px;             /* measured: one-line ribbon on desktop */
    --s-ribbon-h-sm: 50px;          /* measured: two-line ribbon on a phone */
    --v-ribbon: var(--s-ribbon-h-sm); /* default before site.js measures the real ribbon; overridden for desktop in site.css and by JS at runtime */
    --s-hairline: 1px;
    --s-rule: 1px;
    --s-stroke: 1.25px;             /* car linework, non-scaling */
    --s-stroke-soft: 1px;
    --s-stroke-sweep: 2.25px;
    --s-stroke-trace: 2px;
    --s-chamfer: 14px;              /* plate corner cut */
    --s-chamfer-btn: 12px;          /* button: ONE corner, top-right */
    --s-chamfer-slot: 5px;
    --s-target: 44px;               /* minimum touch target */
    --s-swatch: 56px;
    --s-slot-cols: 11;
    --s-slot-cols-wide: 33;
    --s-hero-car-min: 128px;
    --s-hero-bleed: 100cqw;          /* phone: the whole elevation fits the width (meet), nose and tail both keep a margin */
    --s-arch-stage-h: calc(100svh - var(--s-nav-h) - 360px);   /* what is left under the head + title block */
    --s-arch-stage-h-sm: 46svh;
    --s-track-h-sm: 56svh;
    --s-dot: 7px;
    --s-marker-w: 3px;
    --s-focus: 2px;
    --s-focus-offset: 3px;
    --s-measure: 60ch;
    --s-unit-gap: 0.18em;
    --s-blur-nav: 14px;
    --s-pulse-min: 0.3;
    --s-btn-h: 52px;
    --s-input-h: 52px;
    --s-check: 22px;
    --s-rail-h: 72px;
    --s-trace-h: 132px;
    --s-chip-wheel: 56px;
    --s-trim: 28px;
    --s-strip-h: 34px;
    --s-measure-lede: 52ch;
    --s-select-arrow: 6px;          /* the chevron on the form selects */
    --s-select-arrow-a: 22px;       /* its two strokes, from the right edge */
    --s-select-arrow-b: 16px;

    /* ── motion: precise, fast, sharp ease-out, no bounce ── */
    --s-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --s-ease-sharp: cubic-bezier(0.25, 0.9, 0.2, 1);
    --s-dur-fast: 140ms;
    --s-dur: 260ms;
    --s-dur-rule: 700ms;
    --s-dur-sweep: 1500ms;
    --s-delay-sweep: 500ms;
    --s-dur-dot: 1600ms;
    --s-sweep-len: 16;               /* lit length of the sweep, % of the body line */
    /* read by site.js */
    --s-gsap-ease: power3.out;
    --s-gsap-ease-in-out: power2.inOut;
    --s-gsap-dur: 0.5;               /* s */
    --s-gsap-stagger-slots: 0.006;   /* s per slot: 99 slots in ~0.6 s */
    --s-gsap-scrub: 0.5;
    --s-pin-arch: 160;               /* % of viewport scrolled while pinned, desktop */
    --s-pin-arch-sm: 90;             /* phone */
    --s-zoom-start: 1.2;             /* the assembled car, closer in, as the section arrives */
    --s-zoom-start-sm: 1;              /* phone: the car already spans the stage width */
    --s-sep-start: 0;                /* the car arrives assembled as the section scrolls in… */
    --s-sep-start-sm: 0;
    --s-sep-pin: 0.8;                /* …and has lifted apart by the time the pin lands: frame 0 is a composed sheet */
    --s-explode-share: 0.16;         /* share of the pinned scrub that finishes the spread; the rest walks the layers */
    --s-run-threshold: 0.6;          /* how much of the run stage must be visible to auto-run */
    --s-run-delay: 350;              /* ms after it comes into view */
    --s-bp-wide: 900;                /* px — mirrors the @media breakpoints */
    --s-bp-xl: 1200;

    /* ── CH.05 showroom + CH.06 build plate ── */
    --s-cfg-stage-min: 460px;        /* desktop: the configurator car gets a showroom of its own */
    --s-dur-swap: 900ms;             /* the light that passes when a choice changes */
    --s-sweep-light: #ffffff1f;
    --s-press: 0.94;                 /* a swatch pressed under the finger */
    --s-lift: -2px;
    --s-plate-hi: #d9d4cb;           /* brushed titanium: the engraved plate */
    --s-plate-mid: #b4aea4;
    --s-plate-lo: #8f897f;
    --s-plate-ink: #1b1916;          /* engraving on titanium, 9.6:1 on plate-mid */
    --s-plate-ink-soft: #3d3933;     /* empty fields on the plate, 5.4:1 on plate-mid */
    --s-plate-brush: repeating-linear-gradient(90deg, #ffffff10 0 1px, transparent 1px 3px);
    --s-rivet: 9px;
    --s-measure-badge: 13ch;
    --s-measure-badge-sm: 10ch;
    --s-stamp-tilt: -8deg;
    --s-dur-stamp: 520ms;
    --s-stamp-from: 1.6;

    /* ── layers ── */
    --s-z-guides: 0;
    --s-z-content: 1;
    --s-z-nav: 50;
    --s-z-sheet: 60;
    --s-z-skip: 1100;

    /* -- added: type scale + length tokens collected from site.css literals -- */
    --s-leading-140: 1.4;
    --s-leading-100: 1;
    --s-leading-110: 1.1;
    --s-leading-150: 1.5;
    --s-leading-130: 1.3;
    --s-leading-90: 0.9;
    --s-leading-145: 1.45;
    --s-leading-160: 1.6;
    --s-leading-125: 1.25;
    --s-leading-135: 1.35;
    --s-leading-92: 0.92;
    --s-leading-120: 1.2;
    --s-leading-122: 1.22;
    --s-em-0p35: 0.35em;
    --s-size-0p4: 0.4em;
    --s-measure-16: 16em;
    --s-size-0p32: 0.32em;
    --s-size-0p42: 0.42em;
    --s-measure-1p5: 1.5em;
}