/* Um tema é um conjunto completo de tokens semânticos. A identidade roxo/azul é comum;
   superfícies, texto, foco e estados têm contraste próprio em cada tema. Sistema é resolvido
   pelo tema.js antes da primeira pintura; não há inversão por filtro nem escolha de cores por componente. */
:root {
  --acao-fundo: linear-gradient(135deg, #9333ea, #7c3aed);
  --acao-hover: linear-gradient(135deg, #7e22ce, #6d28d9);
  --acao-tinta: #ffffff;
  --fundo-modal: rgb(0 0 0 / 60%);
  --tipo-tech: #22d3ee;
  --fundo: #050307;
  --painel: #07050b;
  --cartao: #0e0918;
  --cartao-2: #140d22;
  --campo: #09060f;
  --tinta: #ece8f4;
  --tinta-2: #b0a8c2;
  --tinta-3: #8a82a0;
  --linha: #241a36;
  --linha-2: #33264d;
  --realce: #c084fc;
  --roxo: #a855f7;
  --roxo-claro: #e9d5ff;
  --azul: #7dd3fc;
  --azul-claro: #bae6fd;
  --azul-suave: rgb(125 211 252 / 10%);
  --azul-borda: rgb(125 211 252 / 28%);
  --icone-tom: var(--azul);
  --brilho: rgb(168 85 247 / 35%);
  --sombra: none;

  --cor-red: #ff5470;
  --cor-orange: #ff9a3d;
  --cor-yellow: #ffd43b;
  --cor-lime: #b8f53d;
  --cor-green: #3dff9a;
  --cor-nula: #5d5670;

  /* A seta da seção "Ligações" (PM-283): verde, sai daqui; vermelha, chega aqui. */
  --seta-sai: var(--cor-green);
  --seta-chega: var(--cor-red);

  --estado-aguarda_dono: #fbbf24;
  --estado-executando: #60a5fa;
  --estado-aprovado: #2dd4bf;
  --estado-rascunho: #8a82a0;
  --estado-concluido: #3dff9a;

  /* O fundo das caixas do workflow do plano, pelo estado da tarefa (diagramas.ts, 2026-11-03); a borda é a cor do estado. */
  --caixa-feita: #0f2a1d;
  --caixa-andamento: #0f1a2e;
  --caixa-bloqueada: #2a1608;

  color-scheme: dark;
  --trilho: #1c1429;
  --linha-suave: #170f23;
  --menu: #111421;
  --perigo-fundo: #1f0d18;
  --superficie-translucida: rgb(14 9 24 / 88%);
  --neutro-suave: rgb(255 255 255 / 6%);
  --tinta-sobre-acento: #14091f;
  --topo-fundo: linear-gradient(110deg, #15101d, #0b1520);
  --separador: rgb(171 191 221 / 18%);
  --avatar-fundo: linear-gradient(135deg, #352046, #15374a);
  --menu-hover: linear-gradient(90deg, #2d1d3d, #152d3d);
  --sombra-menu: 0 18px 45px rgb(0 0 0 / 60%);
  --palco-fundo:
    radial-gradient(ellipse 60% 55% at 0% 0%, rgb(125 211 252 / 6%), transparent 70%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgb(168 85 247 / 18%), transparent 70%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 1.2%) 0 1px, transparent 1px 3px),
    linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(135deg, #030810 0%, #07040e 40%, #1c0a32 100%);
}
:root[data-tema="claro"] {
  --tipo-tech: #0e7490;
  color-scheme: light;
  --fundo: #f5f6fc;
  --painel: #ffffff;
  --cartao: #ffffff;
  --cartao-2: #f0edfa;
  --campo: #ffffff;
  --tinta: #20243b;
  --tinta-2: #4c536b;
  --tinta-3: #616980;
  --linha: #d9deed;
  --linha-2: #b8bfd5;
  --realce: #7e22ce;
  --roxo: #9333ea;
  --roxo-claro: #6b21a8;
  --azul: #0369a1;
  --azul-claro: #075985;
  --azul-suave: rgb(2 132 199 / 8%);
  --azul-borda: rgb(2 132 199 / 30%);
  --icone-tom: #38bdf8;
  --brilho: rgb(147 51 234 / 16%);
  --sombra: none;
  --cor-red: #be123c;
  --cor-orange: #c2410c;
  --cor-yellow: #a16207;
  --cor-lime: #4d7c0f;
  --cor-green: #047857;
  --cor-nula: #64748b;
  --estado-aguarda_dono: #a16207;
  --estado-executando: #0369a1;
  --estado-aprovado: #0f766e;
  --estado-rascunho: #616980;
  --estado-concluido: #047857;
  --caixa-feita: #ecfdf5;
  --caixa-andamento: #e0f2fe;
  --caixa-bloqueada: #fff7ed;
  --trilho: #e2e5f0;
  --linha-suave: #e5e7f0;
  --menu: #ffffff;
  --perigo-fundo: #fff1f2;
  --superficie-translucida: rgb(255 255 255 / 92%);
  --neutro-suave: rgb(32 36 59 / 6%);
  --tinta-sobre-acento: #ffffff;
  --topo-fundo: linear-gradient(110deg, #faf7ff, #f0f9ff);
  --separador: rgb(76 83 107 / 20%);
  --avatar-fundo: linear-gradient(135deg, #f3e8ff, #dff4ff);
  --menu-hover: linear-gradient(90deg, #f3e8ff, #eaf6ff);
  --sombra-menu: 0 18px 45px rgb(32 36 59 / 16%);
  --palco-fundo:
    radial-gradient(ellipse 60% 55% at 0% 0%, rgb(56 189 248 / 7%), transparent 70%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgb(168 85 247 / 6%), transparent 70%),
    linear-gradient(rgb(76 83 107 / 3%) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgb(76 83 107 / 3%) 1px, transparent 1px) 0 0 / 48px 48px,
    #f8f9fd;
}

/* A prévia usa miniaturas próprias, para mostrar os dois temas ao mesmo tempo. */
.aparencia-form { max-width: 960px; }
.aparencia-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; border: 0; margin: 0; padding: 0; }
.aparencia-opcoes legend { font-size: 18px; font-weight: 600; padding: 0 0 16px; }
.formulario .aparencia-opcao { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 16px; border: 1px solid var(--linha-2); border-radius: 8px; background: var(--cartao); cursor: pointer; }
.aparencia-opcao:has(input:checked) { border-color: var(--realce); box-shadow: 0 0 0 1px var(--realce); }
.aparencia-opcao:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 3px; }
.formulario .aparencia-opcao input { padding: 0; box-shadow: none; align-self: center; accent-color: var(--roxo); margin: 0; }
.aparencia-opcao .dica { grid-column: 1 / -1; }
.aparencia-nome { font-size: 15px; font-weight: 600; }
.aparencia-amostra { grid-column: 1 / -1; grid-row: 1; position: relative; display: block; height: 110px; border: 1px solid var(--linha); border-radius: 5px; overflow: hidden; background: var(--amostra-fundo); }
.amostra-claro { --amostra-fundo: #f5f6fc; --amostra-painel: #fff; --amostra-texto: #606980; }
.amostra-escuro { --amostra-fundo: #090610; --amostra-painel: #1a1229; --amostra-texto: #b0a8c2; }
.amostra-sistema { --amostra-fundo: linear-gradient(90deg, #f5f6fc 50%, #090610 50%); --amostra-painel: linear-gradient(90deg, #fff 50%, #1a1229 50%); --amostra-texto: #7c83a0; }
.amostra-topo { position: absolute; inset: 0 0 auto; height: 20px; background: var(--amostra-painel); border-bottom: 2px solid #a855f7; }
.amostra-cartao { position: absolute; inset: 35px 16px 16px; background: var(--amostra-painel); border-left: 3px solid #7dd3fc; border-radius: 3px; }
.amostra-linha { position: absolute; inset: 48px 36px auto 32px; height: 5px; background: var(--amostra-texto); opacity: .7; border-radius: 3px; }