/* nerov_designkit / tokens.css Single source of truth for color, type, spacing, radius, glow. Every NeroV NUI must consume these via var(--nv-*) — never inline hex. */ :root { /* --- Brand ---------------------------------------------------------- */ --nv-primary: #52F6EF; --nv-primary-strong: #34FCFA; --nv-primary-soft: rgba(82, 246, 239, 0.12); --nv-primary-faint: rgba(82, 246, 239, 0.08); --nv-primary-edge: rgba(82, 246, 239, 0.35); --nv-primary-glow: rgba(82, 246, 239, 0.65); --nv-primary-grad: linear-gradient(90deg, #2FE0D9 0%, #95FFFA 100%); --nv-primary-grad-soft: linear-gradient(180deg, rgba(82, 246, 239, 0.25) 0%, rgba(149, 255, 250, 0.25) 100%); --nv-primary-grad-faint: linear-gradient(180deg, rgba(82, 246, 239, 0.08) 0%, rgba(149, 255, 250, 0.08) 100%); /* --- Money (price / value) ------------------------------------------ */ --nv-money: #4BFFB1; --nv-money-soft: rgba(75, 255, 177, 0.12); --nv-money-faint: rgba(75, 255, 177, 0.20); --nv-money-fade: linear-gradient(90deg, rgba(75, 255, 177, 0) 31.73%, rgba(75, 255, 177, 0.15) 100%); /* --- Danger / warn -------------------------------------------------- */ --nv-danger: #FF5656; --nv-danger-soft: rgba(255, 86, 86, 0.10); --nv-danger-grad: linear-gradient(225deg, #FF5656 -1.47%, #FF9A9A 101.39%); --nv-warn: #FFA149; --nv-warn-soft: rgba(255, 161, 73, 0.10); /* --- Chip gradient (Kategorie-/Anzahl-/Wert-Chips, dunkler Text) ---- */ --nv-chip-grad: linear-gradient(225deg, #52F6EF -1.47%, #AAFFFB 101.39%); /* --- Statbar (Stats-Leiste über Listen, Fade nach rechts) ----------- */ --nv-statbar-grad: linear-gradient(90deg, rgba(52, 252, 250, 0.15) 0%, rgba(31, 150, 149, 0) 100%); /* --- Surfaces ------------------------------------------------------- */ --nv-panel: rgba(24, 30, 30, 0.90); --nv-surface-0: rgba(255, 255, 255, 0.03); --nv-surface-1: rgba(255, 255, 255, 0.04); --nv-surface-2: rgba(255, 255, 255, 0.08); --nv-surface-3: rgba(255, 255, 255, 0.12); --nv-surface-4: rgba(255, 255, 255, 0.20); --nv-overlay-dark: rgba(0, 0, 0, 0.32); /* --- Text ----------------------------------------------------------- Alpha-Werte sind für CEF auf bewegtem Game-Background kalibriert: - dim ≥ 0.75: Sub-Labels, Eyebrows, Body-Sekundärtext - faint ≥ 0.55: tertiäre Hilfstexte - ghost ≥ 0.28: nur deaktivierte/dekorative Elemente Niedrigere Alphas waren historisch hier — siehe DESIGN.md §8. */ --nv-text: #FFFFFF; --nv-text-dim: rgba(255, 255, 255, 0.78); --nv-text-faint: rgba(255, 255, 255, 0.58); --nv-text-ghost: rgba(255, 255, 255, 0.30); --nv-text-mute: #A0A0A0; /* --- Type scale (vh) ----------------------------------------------- Scale auf CEF-Default 1080p kalibriert. Body (base) ≈ 15px, klein genug für Density, groß genug für schnelles Lesen über GTA-Footage. Frühere Variante (base 1.20vh ≈ 13px) las zu klein — siehe §8. */ --nv-fs-xs: 1.02vh; /* ≈ 11px @1080 — Eyebrows */ --nv-fs-sm: 1.20vh; /* ≈ 13px — Sub-Labels */ --nv-fs-base: 1.39vh; /* ≈ 15px — Body */ --nv-fs-md: 1.48vh; /* ≈ 16px — Item-Names, Stepper-Qty */ --nv-fs-lg: 1.67vh; /* ≈ 18px — Section-Heads */ --nv-fs-xl: 1.85vh; /* ≈ 20px — Banner-Titles */ --nv-fs-2xl: 2.78vh; /* ≈ 30px — Display Titles */ --nv-fs-3xl: 3.52vh; /* ≈ 38px — Hero Numbers */ /* --- Weights -------------------------------------------------------- Arame liefert nur 100, 400, 700. 250 → praktisch 100 → unlesbar in CEF. 300 wird vom Renderer auf 400 hochgerundet und kompensiert die fehlende Mid-Weight-Variante (§8). */ --nv-fw-thin: 300; --nv-fw-normal: 400; --nv-fw-bold: 700; --nv-font-body: "Arame", sans-serif; --nv-font-display: "Agency FB", "Arame", sans-serif; /* AtomicMarker (single-word) — siehe base.css; multi-word Family-Names überstehen die CSS-Minification in CEF nicht zuverlässig. */ --nv-font-mark: "AtomicMarker", "Agency FB", sans-serif; --nv-tracking-tight: -0.027vh; --nv-tracking-tighter: -0.056vh; --nv-tracking-display: -0.139vh; /* --- Spacing -------------------------------------------------------- */ --nv-gap-1: 0.37vh; --nv-gap-2: 0.56vh; --nv-gap-3: 0.74vh; --nv-gap-4: 1.11vh; --nv-gap-5: 1.48vh; --nv-gap-6: 1.85vh; --nv-gap-7: 2.22vh; /* --- Radius --------------------------------------------------------- */ --nv-r-1: 0.18vh; --nv-r-2: 0.28vh; --nv-r-3: 0.37vh; --nv-r-4: 1.11vh; /* --- Border widths -------------------------------------------------- */ --nv-bw-hair: 0.065vh; --nv-bw-thin: 0.093vh; /* --- Glow / shadow -------------------------------------------------- */ --nv-glow-primary: 0 0 0.74vh var(--nv-primary-glow); --nv-glow-primary-inset: 0 0.37vh 2.22vh 0 rgba(82, 246, 239, 0.35) inset; --nv-glow-danger: 0 0 0.74vh rgba(255, 86, 86, 0.65); --nv-accent-bar-glow: 0 0.09vh 1.11vh 0 var(--nv-primary); --nv-accent-bar-glow-danger: 0 0.09vh 1.11vh 0 var(--nv-danger); --nv-text-glow-primary: 0 0 0.83vh rgba(82, 246, 239, 0.75); --nv-text-glow-danger: 0 0 1.11vh rgba(255, 124, 124, 0.55); --nv-text-stroke: 0.0185vh; /* --- Motion --------------------------------------------------------- */ --nv-trans-fast: all 0.15s ease-in-out; --nv-trans-base: all 0.20s ease-in-out; --nv-trans-slow: all 0.30s ease-out; /* --- Asset hooks (override per-resource by re-declaring on :root) --- */ --nv-banner-bg: url("./assets/images/shop-header.png"); --nv-menu-header-bg: url("./assets/images/menu-header.svg"); --nv-sidebanner-bg: url("./assets/images/side-banner.png"); --nv-spotlight-frame: url("./assets/images/spotlight-frame.svg"); --nv-spotlight-grid: url("./assets/images/spotlight-grid.svg"); }