/* ============================================================ MR7 ENTERPRISE — DESIGN SYSTEM · camada de TOKENS (única fonte de verdade) Nenhuma cor solta nos componentes: tudo referencia estes tokens. Skins trocam SOMENTE tokens (tema), nunca estrutura/dados/rotas. ============================================================ */ :root{ /* --- cores base --- */ --mr7-bg-main:#070A12; /* preto/espaço profundo */ --mr7-bg-surface:#0F1424; /* azul meia-noite (superfície) */ --mr7-bg-card:#121a2e; /* card */ --mr7-bg-glass:rgba(18,26,46,.55); /* glassmorphism controlado */ --mr7-border:rgba(90,140,255,.28); --mr7-border-strong:rgba(124,58,237,.55); --mr7-cyan:#22d3ee; --mr7-blue:#2563FF; --mr7-purple:#7C3AED; --mr7-violet:#A855FF; --mr7-lilac:#B388FF; --mr7-silver:#E6E6EF; --mr7-text-primary:#F2F5FF; --mr7-text-muted:#93a2c4; /* --- estados operacionais (semáforo oficial) --- */ --status-white:#cbd5f5; /* não avaliado */ --status-yellow:#fbbf24; /* em andamento */ --status-green:#34d399; /* aprovado */ --status-red:#f87171; /* erro/reprovação */ /* --- tipografia --- */ --mr7-font:"Segoe UI",Roboto,system-ui,sans-serif; --fs-xs:clamp(11px,.8vw,12px); --fs-sm:clamp(12px,.9vw,13px); --fs-md:clamp(13px,.95vw,15px); --fs-lg:clamp(16px,1.3vw,19px); --fs-xl:clamp(20px,1.8vw,26px); --fs-2xl:clamp(26px,2.6vw,34px); --fw-normal:400; --fw-med:600; --fw-bold:800; /* --- espaçamento (escala 4px) --- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --gap:clamp(10px,1vw,16px); /* --- tamanhos / layout --- */ --sidebar-w:250px; --sidebar-w-collapsed:64px; --ctx-w:clamp(280px,22vw,360px); /* --- raios --- */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; /* --- sombras --- */ --sh-1:0 8px 22px -12px rgba(0,0,0,.6); --sh-2:0 14px 40px -16px rgba(0,0,0,.72); --glow-blue:0 0 22px rgba(37,99,255,.4); --glow-violet:0 0 26px rgba(124,58,237,.45); /* --- animações --- */ --dur-fast:.14s; --dur-med:.24s; --ease:cubic-bezier(.4,0,.2,1); /* --- breakpoints (referência p/ JS) --- */ --bp-tablet:1000px; --bp-mobile:720px; } /* --- intensidade de efeitos (sci-fi controlado) — sobrescrito por data-fx --- */ --fx-blur:6px; --fx-glow:1; } /* ============================================================ TEMAS (skins) — trocam SOMENTE tokens. Aplicados via data-theme no pelo theme-manager.js. Fallback seguro = "official". ============================================================ */ :root[data-theme="low"]{ /* baixo consumo */ --mr7-bg-glass:rgba(18,26,46,.92); --glow-blue:none; --glow-violet:none; --sh-2:0 6px 16px -10px rgba(0,0,0,.6); --fx-blur:0px; --fx-glow:0; } :root[data-theme="contrast"]{ /* alto contraste */ --mr7-bg-main:#000; --mr7-bg-surface:#05070f; --mr7-bg-card:#0a1020; --mr7-text-primary:#ffffff; --mr7-text-muted:#c7d2f0; --mr7-border:rgba(150,180,255,.6); --status-white:#ffffff; --status-yellow:#ffd23f; --status-green:#3ef2a2; --status-red:#ff6b6b; --fx-blur:0px; } /* ============================================================ NÍVEIS DE EFEITO (independente do tema) — data-fx ============================================================ */ :root[data-fx="baixo"]{ --fx-blur:0px; --fx-glow:0; } :root[data-fx="normal"]{ --fx-blur:6px; --fx-glow:1; } :root[data-fx="alto"]{ --fx-blur:12px; --fx-glow:1.4; } /* movimento reduzido */ :root[data-motion="off"] *{ animation:none !important; transition:none !important; } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }