/* * Sémantické tokeny pro NMS Hub. * Sedí na palette z colors.css (--bs-*) a definují vrstvu motivu (light/dark). * Komponenty (base/layout/card/effects) sahají VÝHRADNĚ po --hub-* tokenech — * díky tomu se motiv přepíná jediným atributem `data-theme` na . */ [data-theme="light"] { --hub-bg-base: var(--bs-light); --hub-bg-gradient-from: #eef3fb; --hub-bg-gradient-to: #f7f0ff; --hub-blob-1: rgba(25, 100, 170, 0.35); /* blue-500 */ --hub-blob-2: rgba(0, 159, 227, 0.30); /* cyan-500 */ --hub-blob-3: rgba(253, 82, 0, 0.20); /* orange-500 */ --hub-surface: rgba(255, 255, 255, 0.55); --hub-surface-strong: rgba(255, 255, 255, 0.85); --hub-surface-hover: rgba(255, 255, 255, 0.78); --hub-border: rgba(255, 255, 255, 0.65); --hub-border-strong: rgba(25, 100, 170, 0.18); --hub-text: var(--bs-dark); --hub-text-muted: var(--bs-gray-600); --hub-text-faint: var(--bs-gray-500); --hub-accent: var(--bs-blue-500); --hub-accent-hover: var(--bs-blue-600); --hub-accent-soft: rgba(25, 100, 170, 0.10); --hub-accent-glow: rgba(25, 100, 170, 0.35); --hub-secondary-accent: var(--bs-cyan-500); --hub-tertiary-accent: var(--bs-orange-500); --hub-shadow-sm: 0 2px 8px rgba(7, 30, 51, 0.06); --hub-shadow-md: 0 8px 24px rgba(7, 30, 51, 0.08); --hub-shadow-lg: 0 20px 50px rgba(7, 30, 51, 0.15); /* „Lift" stín — pro hovered kartu, která překrývá sourozedce. * Skládá se z těsného edge stínu (definice hran) + široké difuzní vrstvy (hloubka). */ --hub-shadow-hover: 0 1px 2px rgba(7, 30, 51, 0.22), 0 6px 14px rgba(7, 30, 51, 0.18), 0 30px 60px rgba(7, 30, 51, 0.32); --hub-border-hover: rgba(7, 30, 51, 0.42); --hub-link-chip-bg: rgba(25, 100, 170, 0.08); --hub-link-chip-hover: rgba(25, 100, 170, 0.18); color-scheme: light; } [data-theme="dark"] { --hub-bg-base: #0b1018; --hub-bg-gradient-from: #0c1424; --hub-bg-gradient-to: #150a20; --hub-blob-1: rgba(25, 100, 170, 0.45); --hub-blob-2: rgba(0, 159, 227, 0.32); --hub-blob-3: rgba(253, 82, 0, 0.25); --hub-surface: rgba(20, 26, 38, 0.55); --hub-surface-strong: rgba(28, 36, 52, 0.85); --hub-surface-hover: rgba(34, 44, 64, 0.75); --hub-border: rgba(255, 255, 255, 0.08); --hub-border-strong: rgba(140, 178, 212, 0.20); --hub-text: var(--bs-gray-100); --hub-text-muted: var(--bs-gray-300); --hub-text-faint: var(--bs-gray-400); --hub-accent: var(--bs-cyan-400); --hub-accent-hover: var(--bs-cyan-300); --hub-accent-soft: rgba(0, 159, 227, 0.15); --hub-accent-glow: rgba(0, 159, 227, 0.45); --hub-secondary-accent: var(--bs-cyan-300); --hub-tertiary-accent: var(--bs-orange-400); --hub-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --hub-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --hub-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55); --hub-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.8), 0 6px 14px rgba(0, 0, 0, 0.7), 0 30px 60px rgba(0, 0, 0, 0.85); --hub-border-hover: rgba(255, 255, 255, 0.45); --hub-link-chip-bg: rgba(255, 255, 255, 0.06); --hub-link-chip-hover: rgba(255, 255, 255, 0.14); color-scheme: dark; }