/* ================================================================ vc-tokens.css — VAN-CAR Extended Design Token Layer Import AFTER variables.css. Supplements, never overrides. After editing, run `node scripts/minify-assets.mjs` to regen vc-tokens.min.css, then `node scripts/merge-critical-css.mjs` to regen site-critical.min.css — index.html loads the latter, not this file or vc-tokens.min.css directly. ================================================================ */ :root { /* ── Yellow / Amber (RAM TRX headlights, footer accent) ───────── */ --vc-yellow: #ffcc00; /* RAM TRX lamp — peak brightness */ --vc-yellow-warm: #ffb800; /* warmer headlight glow */ --vc-amber: #ff9500; /* DRL / marker lights */ /* ── Surface depth scale (elevation model) ────────────────────── vc-bg (0) → surface-1 → surface-2 → surface-3 → surface-hi */ --vc-surface-1: #0d0d0f; /* alias for existing --vc-surface */ --vc-surface-2: #121218; /* cards, panels */ --vc-surface-3: #18181f; /* dropdowns, tooltips */ --vc-surface-hi: #1f1f28; /* highest elevation */ /* ── Glow tokens ──────────────────────────────────────────────── Use in box-shadow or drop-shadow() filter. */ --vc-glow-red: 0 0 18px rgba(255, 18, 48, 0.55), 0 0 54px rgba(255, 18, 48, 0.20); --vc-glow-red-xl: 0 0 32px rgba(255, 18, 48, 0.70), 0 0 96px rgba(255, 18, 48, 0.28), 0 0 180px rgba(255, 18, 48, 0.10); --vc-glow-gold: 0 0 16px rgba(200, 169, 110, 0.45), 0 0 44px rgba(200, 169, 110, 0.15); --vc-glow-amber: 0 0 24px rgba(255, 180, 0, 0.55), 0 0 72px rgba(255, 180, 0, 0.20); --vc-glow-amber-xl: 0 0 40px rgba(255, 204, 0, 0.65), 0 0 120px rgba(255, 184, 0, 0.25), 0 0 220px rgba(255, 150, 0, 0.10); --vc-glow-white: 0 0 16px rgba(255, 255, 255, 0.25), 0 0 44px rgba(255, 255, 255, 0.08); /* ── Focus ring ───────────────────────────────────────────────── Single source for keyboard focus on interactive elements. */ --vc-focus-ring: 0 0 0 3px rgba(255, 18, 48, 0.55), 0 0 0 5px rgba(255, 18, 48, 0.15); --vc-focus-ring-gold: 0 0 0 3px rgba(200, 169, 110, 0.55), 0 0 0 5px rgba(200, 169, 110, 0.15); /* ── Button tokens ────────────────────────────────────────────── Single source of truth for the .vc-btn system. Override per-instance with inline custom properties. */ --vc-btn-h: 48px; --vc-btn-px: 24px; --vc-btn-radius: var(--vc-r-sm, 6px); --vc-btn-font: var(--vc-font-display, 'Barlow Condensed', sans-serif); --vc-btn-weight: 800; --vc-btn-size: 0.82rem; --vc-btn-tracking: 0.12em; --vc-btn-gap: 8px; /* ── Overlay / scrim tokens ───────────────────────────────────── */ --vc-scrim-light: rgba(4, 4, 4, 0.42); --vc-scrim-mid: rgba(4, 4, 4, 0.72); --vc-scrim-heavy: rgba(4, 4, 4, 0.92); /* ── Gradient tokens ──────────────────────────────────────────── */ --vc-gradient-red: linear-gradient(180deg, #ff1230 0%, #b90018 100%); --vc-gradient-gold: linear-gradient(180deg, #c8a96e 0%, #9a7a4a 100%); --vc-gradient-dark: linear-gradient(180deg, var(--vc-surface-1) 0%, var(--vc-bg) 100%); --vc-gradient-fade-down: linear-gradient(180deg, transparent 0%, var(--vc-bg) 100%); /* ── Marquee tokens ───────────────────────────────────────────── */ --vc-marquee-move: -50%; /* overridden by vc-marquee.js */ --vc-marquee-speed: 44s; /* ── Animation easing (supplement existing tokens) ───────────── */ --vc-ease-reveal: cubic-bezier(0.16, 1.0, 0.30, 1.0); /* hero reveals */ --vc-ease-slide: cubic-bezier(0.22, 1.0, 0.36, 1.0); /* slide-ins */ --vc-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1.0); /* micro-bounce */ /* ── Section gap tokens ───────────────────────────────────────── */ --vc-section-y: clamp(72px, 8vw, 120px); --vc-section-y-sm: clamp(48px, 5vw, 72px); /* ── Map overlay ──────────────────────────────────────────────── */ --vc-route-glow: rgba(255, 18, 48, 0.32); --vc-route-core: rgba(255, 60, 80, 0.95); --vc-route-pulse: rgba(255, 255, 255, 0.90); /* ════════════════════════════════════════════════════════════════ FAZA 0 — uzupełnienie systemu (audit 2026-06-27) Czysto addytywne; nie nadpisuje istniejących reguł. ════════════════════════════════════════════════════════════════ */ /* ── Tracking / letter-spacing scale (T-6) ────────────────────── Mapuje dotychczasowe klastry letter-spacing na 4 stopnie. */ --vc-track-tight: -0.01em; /* duże nagłówki / hero */ --vc-track-normal: 0.04em; /* body, lekkie rozstrzelenie */ --vc-track-wide: 0.12em; /* labele, buttony (= --vc-btn-tracking) */ --vc-track-wider: 0.20em; /* eyebrow, drobne CAPS */ /* ── Line-height scale (T-7) ───────────────────────────────────── */ --vc-lh-tight: 1.05; /* hero h1 */ --vc-lh-heading: 1.15; /* h2/h3 */ --vc-lh-body: 1.6; /* akapity */ /* ── Type scale — uzupełnienie realnie używanych stopni (T-4) ──── Dopina dominujące rozmiary inline do nazwanych tokenów. */ --vc-text-2xs: 0.62rem; /* mikro-podpisy */ --vc-text-sm-2: 0.72rem; /* drobne labele */ --vc-text-md-2: 1.05rem; /* body „lead" */ --vc-text-xl-2: 1.35rem; /* pod-nagłówki */ /* Kanoniczny nagłówek sekcji (h2) — ujednolica rozjazd inline clamp() */ --vc-fs-h2: clamp(1.9rem, 4vw, 3.4rem); /* Skala promienia (P4) — ogranicza fragmentację border-radius kart */ --vc-radius-sm: 8px; /* drobne elementy: chipy, badge */ --vc-radius-md: 12px; /* karty standardowe */ --vc-radius-lg: 16px; /* duże panele */ --vc-radius-pill: 999px; /* pigułki / okrągłe */ /* ── Wcześniej wiszące / page-local zmienne → globalne (K-4) ───── Definicje page-local nadal wygrywają w swoim scope. */ --vc-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; --nav-h: 88px; /* zgodne z fallbackiem var(--nav-h,88px) */ --index-gutter: clamp(16px, 4vw, 64px); --vc-silver: #aeb6c2; --vc-paper: #f6f7fb; --vc-hairline: rgba(246, 247, 251, 0.09); /* Aliasy zgodności — stare nazwy wskazują na kanoniczne tokeny. */ --copper: var(--vc-gold-warm); --ease-out: var(--vc-ease-out); --silver: var(--vc-silver); --paper: var(--vc-paper); --line: var(--vc-hairline); /* ── Breakpointy — konwencja docelowa (R-1) ────────────────────── Dokumentacja zestawu; konsolidacja @media w Fazie 2. --vc-bp-sm: 480px · --vc-bp-md: 768px · --vc-bp-lg: 1024px · --vc-bp-xl: 1280px */ --vc-bp-sm: 480px; --vc-bp-md: 768px; --vc-bp-lg: 1024px; --vc-bp-xl: 1280px; } /* ── Utility: shared focus-visible rule applied globally ─────────── */ *:focus-visible { outline: none; box-shadow: var(--vc-focus-ring); border-radius: var(--vc-r-sm, 4px); } /* ── Utility: screen-reader only ───────────────────────────────── */ .vc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Utility: eyebrow label ────────────────────────────────────── */ .vc-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--vc-font-display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.20em; text-transform: uppercase; color: var(--vc-red); margin-bottom: 16px; } .vc-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: var(--vc-red); flex-shrink: 0; } .vc-eyebrow--gold { color: var(--vc-gold-warm); } .vc-eyebrow--gold::before { background: var(--vc-gold-warm); }