/* ============================================================ plincar.tech — Design System Foundations Colors + Typography tokens ------------------------------------------------------------ Brand: VAG ECU flashing / chip-tuning / radio russification / professional diagnostics. Dark "performance diagnostic" canvas, hot orange primary, mono technical readouts. Fonts loaded from Google Fonts (Cyrillic-capable — content is RU). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ---------- BRAND ---------- */ --brand-orange: #FF5C00; /* primary — the ".tech" hot orange */ --brand-orange-hover: #FF7A2E; /* lighter — hover */ --brand-orange-press: #DB4E00; /* darker — active/press */ --brand-amber: #F88922; /* warm illustration accent (the sun) */ --brand-ink: #17252A; /* near-black navy — wordmark / ring */ --brand-white: #FFFFFF; /* the white car — clean brand white */ /* ---------- DARK CANVAS (default surface system) ---------- */ --bg-0: #0A1418; /* deepest — page background */ --bg-1: #0F1E24; /* base surface */ --bg-2: #16292F; /* raised card */ --bg-3: #1E363F; /* elevated / hover row */ --bg-inset: #081014; /* wells, inputs, code blocks */ /* hairlines & borders on dark */ --line-1: #213840; /* subtle divider */ --line-2: #2E4A54; /* visible border */ --line-strong: #3C5C66; /* ---------- TEXT (on dark) ---------- */ --fg-1: #F1F6F7; /* primary text */ --fg-2: #9FB3BB; /* secondary text */ --fg-3: #647C85; /* muted / captions */ --fg-on-orange: #0A1418; /* dark text on orange fills */ /* ---------- LIGHT SURFACES (inverted sections) ---------- */ --light-bg: #F3F6F6; --light-surface: #FFFFFF; --light-line: #DCE4E6; --light-fg-1: #17252A; --light-fg-2: #4A5F66; --light-fg-3: #7C9099; /* ---------- SEMANTIC ---------- */ --ok: #34D399; /* готово / прошито */ --ok-bg: rgba(52,211,153,.12); --warn: #F8A622; /* внимание */ --warn-bg: rgba(248,166,34,.12); --danger: #FF5247; /* ошибка / DTC */ --danger-bg: rgba(255,82,71,.12); --info: #3BA7FF; /* инфо */ --info-bg: rgba(59,167,255,.12); /* ---------- GAUGE / DATA ---------- */ --gauge-track: #1E363F; --gauge-fill: var(--brand-orange); /* ---------- TYPOGRAPHY FAMILIES ---------- */ --font-display: 'Onest', system-ui, 'Segoe UI', Arial, sans-serif; --font-body: 'Onest', system-ui, 'Segoe UI', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ---------- TYPE SCALE (px) ---------- */ --fs-display-1: 76px; --fs-display-2: 56px; --fs-h1: 42px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 19px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-label: 13px; --fs-caption: 12px; --fs-mono: 14px; --fs-mono-sm: 12px; /* ---------- WEIGHTS ---------- */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800; /* ---------- RADII ---------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ---------- SPACING (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---------- SHADOWS / ELEVATION (dark canvas) ---------- */ --shadow-1: 0 1px 2px rgba(0,0,0,.45); --shadow-2: 0 6px 20px rgba(0,0,0,.45); --shadow-3: 0 18px 50px rgba(0,0,0,.55); --glow-orange: 0 6px 24px rgba(255,92,0,.35); --glow-orange-strong: 0 0 0 1px rgba(255,92,0,.35), 0 10px 36px rgba(255,92,0,.40); --ring-focus: 0 0 0 3px rgba(255,92,0,.40); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(.16,.84,.44,1); --ease-in-out: cubic-bezier(.65,.05,.36,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 380ms; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .t-display-1 { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--fs-display-1); line-height: .98; letter-spacing: -.02em; color: var(--fg-1); } .t-display-2 { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--fs-display-2); line-height: 1.0; letter-spacing: -.02em; color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.018em; color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; color: var(--fg-1); } .t-h3 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; color: var(--fg-1); } .t-h4 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-h4); line-height: 1.3; color: var(--fg-1); } .t-body-lg { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--fs-body-lg); line-height: 1.6; color: var(--fg-2); } .t-body { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); } .t-body-sm { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--fs-body-sm); line-height: 1.55; color: var(--fg-2); } .t-label { font-family: var(--font-mono); font-weight: var(--w-medium); font-size: var(--fs-label); line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); } .t-caption { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); } .t-mono { font-family: var(--font-mono); font-weight: var(--w-regular); font-size: var(--fs-mono); line-height: 1.5; color: var(--fg-1); } .t-mono-data { font-family: var(--font-mono); font-weight: var(--w-bold); font-size: var(--fs-mono); line-height: 1.2; color: var(--brand-orange); letter-spacing: .01em; } /* Orange accent helper for inline ".tech"-style emphasis */ .accent { color: var(--brand-orange); } .accent-amber { color: var(--brand-amber); }