/* ========================= VARIÁVEIS DE TEMA (LIGHT) ========================= */ :root{ /* Base de superfícies e textos */ --bg: #f2f2f2; /* fundo geral da app */ --panel: #ffffff; /* blocos/painéis/boxes */ --border: #dedede; /* linhas, divisórias, contornos neutros */ --text: #12082E; /* cor principal de texto (alto contraste) */ --muted: #9ca3af; /* textos secundários/placeholder */ /* Acentos de marca (CTA, destaques) */ --accent: #f7535d; /* magenta principal p/ botões e ênfases */ --accent2: #1c262e; /* roxo de apoio (hover/estados) */ /* Estados e padrões de card */ --danger: #f42e6d; /* erros/alertas destrutivos */ --bgInputs: #f6f6f6; /* fundo de inputs */ --card-bg-default: #1c262e; /* fallback de fundo de cards (quando sem cor própria) */ --card-text-default: #fbfbfb; /* fallback de cor de texto em cards */ /* ---------- NOVOS TOKENS DE CARD ---------- */ --card-border-color: #1c262e; /* cor da borda dos cards */ --card-border-width: 0; /* px (número) → usar com calc(*1px) */ --card-radius: 5; /* px (número) → usar com calc(*1px) */ --card-padding: 8; /* px (número) → usar com calc(*1px) */ /* Sombra aproximando o estilo do vis-network */ --card-shadow-color: rgba(0,0,0,.25); /* cor da sombra */ --card-shadow-size: 10; /* blur em px (número) → usar com calc(*1px) */ --card-shadow-offset-x: 0; /* deslocamento X (número) */ --card-shadow-offset-y: 3; /* deslocamento Y (número) */ /* Destaques de interação nos cards */ --card-accent-border: #f42e6d; /* borda quando selecionado/hover */ --card-move-border: #f97c4b; /* borda quando em "modo mover" (âmbar) */ /* Arestas/edges do grafo (vis-network) */ --edge-color: #999999; /* cor padrão das arestas */ --edge-highlight: #f42e6d; /* cor quando selecionadas/hover */ --edge-width: 1; /* espessura base (px número) */ --edge-arrow-scale: 0.5; /* escala/tamanho das setas */ /* Nó (node) selecionado/hover */ --node-highlight-border: #f42e6d; /* borda do nó selecionado */ --node-hover-border: #f42e6d; /* borda ao passar o mouse */ /* Fundo/texto do "cérebro" do mapa */ --brain-text-color: #12082E; /* cor do texto sobre imagem do cérebro */ --brain-img: url('/imgs/brain-light.svg'); /* versão para fundo claro (ícone/ilustração escura) */ /* Tipografia de conteúdo */ --content-font-size: 16px; /* tamanho de fonte para áreas de conteúdo */ /* Tooltip (balão de ajuda) */ --tooltip-bg: #1c262e; /* fundo do tooltip */ --tooltip-fg: #f2f2f2; /* texto do tooltip */ --tooltip-border: #1a1a1a; /* borda do tooltip */ --tooltip-radius: 4px; /* cantos (px literal) */ --tooltip-shadow: 0 8px 20px rgba(0,0,0,.28); /* sombra do tooltip */ --tooltip-max: 660px; /* largura máxima */ --tooltip-pad: 6px 8px; /* padding interno */ /* ========== ALERTAS / NOTIFICAÇÕES ========== */ /* Success */ --alert-success-bg: #C0CE39; /* fundo verde-limão */ --alert-success-text: #000000; /* texto escuro */ --alert-success-border: #A8B830; /* borda mais escura */ --alert-success-icon: #6B7A1F; /* cor do ícone */ /* Info */ --alert-info-bg: #2F83BF; /* fundo azul */ --alert-info-text: #ffffff; /* texto branco */ --alert-info-border: #256A9A; /* borda mais escura */ --alert-info-icon: #1A4D6F; /* cor do ícone */ /* Warning */ --alert-warning-bg: #D0A43F; /* fundo laranja-dourado */ --alert-warning-text: #ffffff; /* texto branco */ --alert-warning-border: #B68A32; /* borda mais escura */ --alert-warning-icon: #8A6724; /* cor do ícone */ /* Danger */ --alert-danger-bg: #CC324E; /* fundo vermelho */ --alert-danger-text: #ffffff; /* texto branco */ --alert-danger-border: #A82840; /* borda mais escura */ --alert-danger-icon: #7D1E30; /* cor do ícone */ /* Configurações gerais dos alertas */ --alert-radius: 10px; /* border-radius */ --alert-shadow: 0 6px 15px rgba(0,0,0,.2); /* sombra */ --alert-padding: 16px 20px; /* padding interno */ --alert-icon-size: 24px; /* tamanho do ícone */ } /* ========================= VARIÁVEIS DE TEMA (DARK) Ative com: … ========================= */ :root[data-theme="dark"]{ /* Bases no escuro, mantendo contraste alto */ --bg: #0e0e13; --panel: #15151d; --border: #2b2b35; --text: #e8e8f0; --muted: #9ca3af; /* Acentos: mantemos identidade, mas funcionam bem no escuro */ --accent: #fa8149; --accent2: #1c262e; /* Estados e padrões de card */ --danger: #f4356a; --bgInputs: #12121a; --card-bg-default: #2a2a33; --card-text-default: #e8e8f0; /* Cards */ --card-border-color: #1c262e; --card-border-width: 0; --card-radius: 5; --card-padding: 8; /* Sombra mais sutil no dark (menos "halo") */ --card-shadow-color: rgba(0,0,0,.45); --card-shadow-size: 12; --card-shadow-offset-x: 0; --card-shadow-offset-y: 6; /* Destaques de interação */ --card-accent-border: #f4356a; --card-move-border: #f5a524; /* Arestas/edges */ --edge-color: #6b6b75; --edge-highlight: #f4356a; --edge-width: 1; --edge-arrow-scale: 0.7; /* Nó (node) */ --node-highlight-border: #f4356a; --node-hover-border: #f4356a; /* "Cérebro" no dark: imagem clara sobre fundo escuro */ --brain-text-color: #e8e8f0; --brain-img: url('/imgs/brain-dark.svg'); /* Tooltip */ --tooltip-bg: #231b3d; --tooltip-fg: #eaeafb; --tooltip-border: #0e0e13; --tooltip-radius: 4px; --tooltip-shadow: 0 10px 28px rgba(0,0,0,.5); --tooltip-max: 660px; --tooltip-pad: 6px 8px; /* ========== ALERTAS / NOTIFICAÇÕES (DARK) ========== */ /* Success - mais suave no dark */ --alert-success-bg: #7A9F35; /* verde menos vibrante */ --alert-success-text: #ffffff; /* texto branco no dark */ --alert-success-border: #5F7D28; /* borda mais escura */ --alert-success-icon: #4A6120; /* cor do ícone */ /* Info - azul mais suave */ --alert-info-bg: #2563A8; /* azul menos vibrante */ --alert-info-text: #ffffff; /* texto branco */ --alert-info-border: #1D4E85; /* borda mais escura */ --alert-info-icon: #14395F; /* cor do ícone */ /* Warning - laranja mais suave */ --alert-warning-bg: #B8872E; /* laranja menos vibrante */ --alert-warning-text: #ffffff; /* texto branco */ --alert-warning-border: #956D24; /* borda mais escura */ --alert-warning-icon: #6E521B; /* cor do ícone */ /* Danger - vermelho mais suave */ --alert-danger-bg: #A82840; /* vermelho menos vibrante */ --alert-danger-text: #ffffff; /* texto branco */ --alert-danger-border: #851F33; /* borda mais escura */ --alert-danger-icon: #5F1724; /* cor do ícone */ /* Configurações gerais dos alertas (mesmas do light) */ --alert-radius: 10px; --alert-shadow: 0 8px 20px rgba(0,0,0,.4); /* sombra mais forte no dark */ --alert-padding: 16px 20px; --alert-icon-size: 24px; } /* ========================= Auto-dark (opcional) Usa o tema dark quando o SO preferir. Você pode remover se controlar via data-theme. ========================= */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; } }