/* ============================================================================ over.tv Frontend Kit — Design Tokens Porte do docs/src/styles/tokens.css (React kit) para a stack Plugg (MVC/Razor). Namespace --ovtv-* : NÃO colide com Bootstrap (--bs-*) nem com a camada legada .otv-empresa (--otv-*). Importar 1x globalmente (antes de ovtv-kit.css). ============================================================================ */ :root{ /* ===== BRAND ===== */ --ovtv-brand-50:#ECEEFE;--ovtv-brand-100:#D6DAFD; --ovtv-brand-500:#1429EF;--ovtv-brand-600:#0F1FBF;--ovtv-brand-700:#0C189A; /* ===== ACCENT (gamificação/promoção — uso pontual) ===== */ --ovtv-accent-50:#FFE6EE;--ovtv-accent-500:#FF2D6B; /* ===== SEMANTIC / STATUS ===== */ --ovtv-success-50:#E6FBF5;--ovtv-success-500:#1EE0AC; --ovtv-warning-50:#FEF7E0;--ovtv-warning-500:#F4BD0E; --ovtv-danger-50:#FDECEA;--ovtv-danger-500:#E85347; --ovtv-info-50:#E6F9FC;--ovtv-info-500:#09C2DE; /* ===== NEUTRALS ===== */ --ovtv-gray-0:#FFFFFF;--ovtv-gray-50:#F9FAFB;--ovtv-gray-100:#F3F4F6; --ovtv-gray-200:#E5E9F2;--ovtv-gray-300:#DBDFEA;--ovtv-gray-400:#B7C2D0; --ovtv-gray-500:#8091A7;--ovtv-gray-600:#5B6B7F;--ovtv-gray-700:#344357;--ovtv-gray-900:#1F2B3A; /* ===== RAIO ===== */ --ovtv-radius-sm:6px;--ovtv-radius-md:10px;--ovtv-radius-lg:14px;--ovtv-radius-xl:20px;--ovtv-radius-pill:999px; /* ===== SOMBRA / ELEVAÇÃO ===== */ --ovtv-shadow-xs:0 1px 2px rgba(31,43,58,.06);--ovtv-shadow-sm:0 2px 8px rgba(31,43,58,.06); --ovtv-shadow-md:0 8px 24px rgba(31,43,58,.08);--ovtv-shadow-lg:0 16px 40px rgba(31,43,58,.12); --ovtv-focus-ring:0 0 0 3px rgba(20,41,239,.25); /* ===== ESPAÇAMENTO (base 4px) ===== */ --ovtv-space-1:4px;--ovtv-space-2:8px;--ovtv-space-3:12px;--ovtv-space-4:16px;--ovtv-space-5:20px; --ovtv-space-6:24px;--ovtv-space-8:32px;--ovtv-space-10:40px;--ovtv-space-12:48px; /* ===== LAYOUT ===== */ --ovtv-sidebar-w:248px;--ovtv-content-max:1440px;--ovtv-header-h:64px; /* ===== TIPOGRAFIA ===== */ --ovtv-font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; /* ===== MOTION ===== */ --ovtv-ease:cubic-bezier(.4,0,.2,1);--ovtv-dur-fast:120ms;--ovtv-dur:200ms;--ovtv-dur-slow:320ms; /* ===== Z-INDEX ===== */ --ovtv-z-dropdown:1000;--ovtv-z-sticky:1010;--ovtv-z-drawer:1030; --ovtv-z-overlay:1040;--ovtv-z-modal:1050;--ovtv-z-toast:1060; } /* Dark mode (P3) — opt-in. Ativa com OU body.dark-mode (classe nativa do tema DashLite). Inverte a escala de cinzas: superfícies escuras, texto claro. Marca/status permanecem. */ [data-theme="dark"], body.dark-mode{ --ovtv-gray-0:#172230; --ovtv-gray-50:#0E1620; --ovtv-gray-100:#1E2B3B; --ovtv-gray-200:#27323F; --ovtv-gray-300:#33404E; --ovtv-gray-400:#5B6B7F; --ovtv-gray-500:#8091A7; --ovtv-gray-600:#AAB4C2; --ovtv-gray-700:#DBE2EA; --ovtv-gray-900:#F4F7FB; --ovtv-shadow-xs:0 1px 2px rgba(0,0,0,.4);--ovtv-shadow-sm:0 2px 8px rgba(0,0,0,.4); --ovtv-shadow-md:0 8px 24px rgba(0,0,0,.5);--ovtv-shadow-lg:0 16px 40px rgba(0,0,0,.6); }