/* DarkTask — tema Colorido (19/09/2026)

   O único tema com cor. A paleta vem do cartaz de ondas que o dono mandou:
   creme, azul-noite, petróleo, turquesa, laranja, tijolo, mostarda, oliva.
   Os valores moram em tokens.css ([data-dt-paleta="colorido"]); aqui só se
   decide ONDE cada cor entra.

   COMO A FOLHA FUNCIONA — blocos re-tokenizados
   Em vez de caçar cada texto, ícone e fio dentro de uma região colorida, a
   região redefine os tokens (--bg, --text, --border…) para o par que lê bem
   sobre aquela cor. Tudo o que está dentro já bebe dos tokens, então herda a
   legibilidade sem regra nova. Custom property declarada no elemento vence a
   herdada, mesmo a que o applyTheme grava inline com !important na raiz.
   Os apelidos antigos (--panel, --line, --muted…) são resolvidos na raiz e
   chegam aqui como VALOR, não como var(): por isso cada bloco os redeclara.

   REGRAS DE USO DA COR
   - Creme + azul-noite fazem a leitura. Cor é preenchimento de bloco.
   - Laranja = agir (botão principal, o que está ligado, a tela em que se está).
   - Azul-noite = moldura (barra lateral, rodapé, topo de janela) e seleção
     dentro do papel (aba escolhida).
   - Petróleo = cabeçalho global. Turquesa, mostarda e tijolo = cabeça de
     cartão, para o olho separar os assuntos sem ler o título.
   - Brasa (#f03000) nunca recebe texto: só fio, ponto e barra.
   - Perigo continua sendo o tijolo, e só ele: nenhum bloco decorativo usa
     tijolo onde exista botão de excluir por perto.

   Toda regra leva o prefixo html[data-dt-paleta="colorido"] body #dc-root:
   sem o id, floating-shell e app-polish vencem (ver camada-visual). */

/* ==========================================================================
   1. Os blocos — conjuntos de tokens por cor de fundo
   ========================================================================== */

/* Apelidos: valem para QUALQUER bloco, sempre apontando para os tokens novos. */
html[data-dt-paleta="colorido"] body :is(
  .dtk-noite, .dtk-petroleo, .dtk-laranja, .dtk-turquesa, .dtk-mostarda, .dtk-tijolo, .dtk-papel-alto,
  #dc-root .dt-sidebar, #dc-root .dt-timeline-dock, #dc-root .dt-topbar-host,
  #dc-root .dth-hero, #dc-root .dth-clima-cabeca,
  #dc-root .dth-noticias > .dth-sec-cabeca, #dc-root .dth-mercados > .dth-sec-cabeca,
  #dc-root .dtp-cabeca, #dc-root .dtn-cabeca, #dc-root #dt-config .dtcfg-cabeca,
  #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) :is(.dl-hero, .dl-editor-header),
  #dc-root .dl-card-kicker, #dc-root .dt-project-shell > .dt-project-header, #dc-root .dt-project-shell .dt-task-card,
  #dc-root #dt-config .dtcfg-cartao-cabeca,
  #dc-root .dt-task-editor > div:first-child, #dc-root .dtm-cabeca, #dc-root .dt-view-header, #dc-root .dt-kanban-topo,
  .dt-amb-dialogo > header, .dt-system-dialog .dt-system-dialog-topo,
  .dl-modal-overlay :is(.dl-system-modal-header, .dl-standard-modal-header),
  #dc-root .dt-floating-modal:not(.dtm) > :first-child
) {
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --glass: var(--surface-2);
  --glass-2: var(--surface-3);
  --line: var(--border);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --cancel: var(--text-3);
  --dt-surface: var(--surface-1);
  --dt-surface-hover: var(--surface-2);
  --dt-surface-strong: var(--surface-3);
  --dt-field: var(--surface-1);
  --dt-edge: var(--border);
  --dt-edge-strong: var(--border-strong);
  --accent-soft: var(--accent-weak);
  --dth-tenue: var(--text-3);
  color: var(--text);
}

/* Azul-noite: creme por cima (14,2:1); o apagado passa de 4,5:1 até no hover. */
html[data-dt-paleta="colorido"] body :is(
  .dtk-noite, #dc-root .dt-sidebar, #dc-root .dt-timeline-dock,
  #dc-root .dt-task-editor > div:first-child, #dc-root .dtm-cabeca, #dc-root .dt-view-header, #dc-root .dt-kanban-topo,
  .dt-amb-dialogo > header, .dt-system-dialog .dt-system-dialog-topo,
  .dl-modal-overlay :is(.dl-system-modal-header, .dl-standard-modal-header),
  #dc-root .dt-floating-modal:not(.dtm) > :first-child
) {
  --bg: #0c1824;
  --bg-elev: #12283a;
  --surface-1: #0c1824;
  --surface-2: #183c54;
  --surface-3: #1f4a66;
  --chapa: #15314a;
  --border: #23425c;
  --border-strong: #23425c;
  --line-2: #6d8aa0;
  --text: #f3e3c8;
  --text-2: #dccdae;
  --text-3: #a9b7bd;
  --accent: #fc7800;
  --accent-2: #fc9000;
  /* âmbar clareado: o #fc9000 do cartaz caía a 4,1:1 sobre o pressionado */
  --accent-text: #ffa733;
  --accent-weak: rgba(252, 120, 0, .18);
  --on-accent: #0c1824;
  --ok: #7cc4c0;
  --ok-text: #7cc4c0;
  --warn: #ffa733;
  --warn-text: #ffa733;
  --danger: #ffab97;
  --danger-text: #ffab97;
  --danger-soft: rgba(255, 171, 151, .14);
  --dt-toque: rgba(243, 227, 200, .07);
  --dt-toque-forte: rgba(243, 227, 200, .13);
  background-color: var(--bg);
}

/* Petróleo: creme por cima (7,9:1). O laranja como TEXTO não passa aqui
   (3,7:1), então o destaque solto é o próprio creme. */
html[data-dt-paleta="colorido"] body :is(.dtk-petroleo, #dc-root .dt-topbar-host) {
  --bg: #184854;
  --bg-elev: #1d5462;
  --surface-1: #184854;
  --surface-2: #1f5866;
  --surface-3: #24606e;
  --chapa: #1d5260;
  --border: #2f6876;
  --border-strong: #2f6876;
  --line-2: #7fa7ae;
  --text: #f3e3c8;
  --text-2: #e2d6ba;
  --text-3: #d3e0e1;
  --accent: #fc7800;
  --accent-2: #fc9000;
  --accent-text: #f3e3c8;
  --accent-weak: rgba(243, 227, 200, .14);
  --on-accent: #0c1824;
  --ok: #f3e3c8;
  --ok-text: #f3e3c8;
  --warn: #ffd08a;
  --warn-text: #ffd08a;
  --danger: #ffd2c6;
  --danger-text: #ffd2c6;
  --dt-toque: rgba(243, 227, 200, .08);
  --dt-toque-forte: rgba(243, 227, 200, .15);
  background-color: var(--bg);
}

/* Laranja: só a tinta azul-noite lê aqui (6,7:1) — não existe "apagado" sobre
   laranja, o secundário usa a mesma tinta. O botão cheio vira azul-noite. */
html[data-dt-paleta="colorido"] body :is(.dtk-laranja, #dc-root .dth-hero) {
  --bg: #fc7800;
  --bg-elev: #fc9000;
  --surface-1: #fc7800;
  --surface-2: #fc9000;
  --surface-3: #ffa229;
  --chapa: #f08400;
  --text: #0c1824;
  --text-2: #0c1824;
  --text-3: #0c1824;
  --accent: #0c1824;
  --accent-2: #183c54;
  --accent-text: #0c1824;
  --accent-weak: rgba(12, 24, 36, .12);
  --on-accent: #f3e3c8;
  --ok: #0c1824;
  --ok-text: #0c1824;
  --warn: #0c1824;
  --warn-text: #0c1824;
  --danger: #0c1824;
  --danger-text: #0c1824;
  --danger-soft: rgba(12, 24, 36, .12);
  --border: rgba(12, 24, 36, .22);
  --border-strong: rgba(12, 24, 36, .22);
  --line-2: rgba(12, 24, 36, .6);
  --dt-toque: rgba(12, 24, 36, .08);
  --dt-toque-forte: rgba(12, 24, 36, .15);
  background-color: var(--bg);
}

/* Turquesa e mostarda: tinta azul-noite (5,6:1 e 6,5:1), sem apagado. */
html[data-dt-paleta="colorido"] body :is(.dtk-turquesa, #dc-root .dth-clima-cabeca, #dc-root .dtp-cabeca) {
  --bg: #489c9c;
  --bg-elev: #5aabab;
  --surface-1: #489c9c;
  --surface-2: #5aabab;
  --surface-3: #6cb8b8;
  --chapa: #419090;
  --text: #0c1824;
  --text-2: #0c1824;
  --text-3: #0c1824;
  --accent: #0c1824;
  --accent-2: #183c54;
  --accent-text: #0c1824;
  --accent-weak: rgba(12, 24, 36, .12);
  --on-accent: #f3e3c8;
  --ok: #0c1824;
  --ok-text: #0c1824;
  --warn: #0c1824;
  --warn-text: #0c1824;
  --danger: #0c1824;
  --danger-text: #0c1824;
  --danger-soft: rgba(12, 24, 36, .12);
  --border: rgba(12, 24, 36, .22);
  --border-strong: rgba(12, 24, 36, .22);
  --line-2: rgba(12, 24, 36, .6);
  --dt-toque: rgba(12, 24, 36, .08);
  --dt-toque-forte: rgba(12, 24, 36, .15);
  background-color: var(--bg);
}
html[data-dt-paleta="colorido"] body :is(.dtk-mostarda, #dc-root .dth-mercados > .dth-sec-cabeca, #dc-root #darklist-container :is(.dl-hero, .dl-editor-header)) {
  --bg: #cc9000;
  --bg-elev: #d9a01c;
  --surface-1: #cc9000;
  --surface-2: #d9a01c;
  --surface-3: #e2ae38;
  --chapa: #c08800;
  --text: #0c1824;
  --text-2: #0c1824;
  --text-3: #0c1824;
  --accent: #0c1824;
  --accent-2: #183c54;
  --accent-text: #0c1824;
  --accent-weak: rgba(12, 24, 36, .12);
  --on-accent: #f3e3c8;
  --ok: #0c1824;
  --ok-text: #0c1824;
  --warn: #0c1824;
  --warn-text: #0c1824;
  --danger: #0c1824;
  --danger-text: #0c1824;
  --danger-soft: rgba(12, 24, 36, .12);
  --border: rgba(12, 24, 36, .22);
  --border-strong: rgba(12, 24, 36, .22);
  --line-2: rgba(12, 24, 36, .6);
  --dt-toque: rgba(12, 24, 36, .08);
  --dt-toque-forte: rgba(12, 24, 36, .15);
  background-color: var(--bg);
}

/* Tijolo: creme por cima (6,0:1). */
html[data-dt-paleta="colorido"] body :is(.dtk-tijolo, #dc-root .dth-noticias > .dth-sec-cabeca, #dc-root .dtn-cabeca, #dc-root #socialmedia-container :is(.dl-hero, .dl-editor-header)) {
  --bg: #a81800;
  --bg-elev: #b42408;
  --surface-1: #a81800;
  --surface-2: #b42408;
  --surface-3: #9c1600;
  --chapa: #9c1600;
  --text: #f3e3c8;
  --text-2: #f3e3c8;
  --text-3: #f3e3c8;
  --accent: #f3e3c8;
  --accent-2: #fbf3e4;
  --accent-text: #f3e3c8;
  --accent-weak: rgba(243, 227, 200, .16);
  --on-accent: #0c1824;
  --ok: #f3e3c8;
  --ok-text: #f3e3c8;
  --warn: #f3e3c8;
  --warn-text: #f3e3c8;
  --danger: #f3e3c8;
  --danger-text: #f3e3c8;
  --danger-soft: rgba(243, 227, 200, .16);
  --border: rgba(243, 227, 200, .26);
  --border-strong: rgba(243, 227, 200, .26);
  --line-2: rgba(243, 227, 200, .62);
  --dt-toque: rgba(243, 227, 200, .08);
  --dt-toque-forte: rgba(243, 227, 200, .15);
  background-color: var(--bg);
}

/* ==========================================================================
   2. A casca
   ========================================================================== */

/* Barra lateral: a marca é um <img> preto — invertida fica branca, e o sépia
   leve a traz para o creme do tema. */
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dtc-logo img {
  filter: invert(1) sepia(.32) saturate(1.5) hue-rotate(-8deg) brightness(.97);
}
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar { border-right-color: var(--border) !important; }
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"] {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"] :is(svg, span) {
  color: var(--on-accent) !important;
}

/* Cabeçalho global em petróleo, de ponta a ponta.
   floating-shell e casca prendem --text/--muted/--faint do .dt-notice-host com
   !important no tema claro (tinta preta) — e o Colorido É tema claro. Aqui a
   tinta volta a ser o creme, com o mesmo !important e mais peso. */
html[data-dt-paleta="colorido"][data-dt-theme="light"] body #dc-root .dt-notice-host.dt-topbar-host {
  --text: #f3e3c8 !important;
  --muted: #e2d6ba !important;
  --faint: #d3e0e1 !important;
  --tfg: #f3e3c8 !important;
  --tlabel: #d3e0e1 !important;
  --tsub: #e2d6ba !important;
  --tsep: rgba(243, 227, 200, .16) !important;
}
html[data-dt-paleta="colorido"][data-dt-theme="light"] body #dc-root .dt-topbar-host .dt-alert-content { color: #f3e3c8 !important; }
/* O apagado da casca é uma mistura de 60% da tinta com o fundo; sobre o
   petróleo isso cai a 3,8:1. Aqui ele é o apagado do bloco (4,8:1 no hover). */
html[data-dt-paleta="colorido"] body #dc-root .dt-topbar-host :is(.dt-topbar-rss, .dt-topbar-newslabel) { color: var(--text-3) !important; }
html[data-dt-paleta="colorido"] body #dc-root .dt-topbar-host .dt-topbar-cell { color: var(--text-2) !important; }
html[data-dt-paleta="colorido"] body #dc-root .dt-topbar-host .dt-topbar-cell:hover { color: var(--text) !important; background: var(--surface-2) !important; }
html[data-dt-paleta="colorido"] body #dc-root .dt-topbar-host .dt-topbar-band {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}

/* ==========================================================================
   3. Hoje
   ========================================================================== */

/* O herói é a maior mancha da tela: laranja chapado, sem o brilho metálico. */
html[data-dt-paleta="colorido"] body #dc-root .dth-hero-fundo { background: var(--bg) !important; }
html[data-dt-paleta="colorido"] body #dc-root .dth-hero-brilho { display: none !important; }
html[data-dt-paleta="colorido"] body #dc-root .dth-hero { --dth-tenue: #0c1824; }

/* A linha de adicionar volta ao papel: é campo de escrever, não cartaz. */
html[data-dt-paleta="colorido"] body #dc-root .dth-hero .dth-add {
  --bg: #fbf3e4;
  --bg-elev: #fffaf0;
  --surface-1: #fbf3e4;
  --surface-2: #fffaf0;
  --surface-3: #ffffff;
  --chapa: #f3e3c8;
  --border: #d9c29c;
  --border-strong: #d9c29c;
  --line: #d9c29c;
  --line-2: #8a7350;
  --text: #071019;
  --text-2: #1f3a47;
  --text-3: #415158;
  --faint: #415158;
  --accent: #fc7800;
  --accent-2: #fc9000;
  --accent-text: #184854;
  --accent-weak: rgba(252, 120, 0, .14);
  --on-accent: #071019;
  --ok: #306c6c;
  --ok-text: #184854;
  --warn: #cc9000;
  --warn-text: #6b5000;
  --danger: #9c1800;
  --danger-text: #9c1800;
  background: var(--bg) !important;
  border-top-color: rgba(12, 24, 36, .22) !important;
}
html[data-dt-paleta="colorido"] body #dc-root .dth-add-ir:not(:disabled) {
  background: #0c1824 !important;
  color: #f3e3c8 !important;
}
html[data-dt-paleta="colorido"] body #dc-root .dth-add-ir:not(:disabled):hover { background: #183c54 !important; }

html[data-dt-paleta="colorido"] body #dc-root .dth-clima-cabeca { background: var(--bg) !important; }
html[data-dt-paleta="colorido"] body #dc-root .dth-clima:hover .dth-clima-cabeca { background: var(--surface-2) !important; }

/* Creme do cartaz (Configurações): a faixa neutra. Azul colava no petróleo do
   cabeçalho logo acima; o creme forte separa e ainda é cor do cartaz. */
html[data-dt-paleta="colorido"] body :is(.dtk-creme, #dc-root #dt-config .dtcfg-cabeca) {
  --bg: #e4c09c;
  --bg-elev: #ecd0b0;
  --surface-1: #e4c09c;
  --surface-2: #ecd0b0;
  --surface-3: #f1dcc2;
  --chapa: #dcb68e;
  --text: #071019;
  --text-2: #1f3a47;
  --text-3: #33454d;
  --accent: #071019;
  --accent-2: #183c54;
  --accent-text: #071019;
  --accent-weak: rgba(12, 24, 36, .1);
  --on-accent: #f3e3c8;
  --ok: #184854;
  --ok-text: #184854;
  --warn: #5a4300;
  --warn-text: #5a4300;
  --danger: #8c1500;
  --danger-text: #8c1500;
  --danger-soft: rgba(140, 21, 0, .1);
  --border: rgba(12, 24, 36, .2);
  --border-strong: rgba(12, 24, 36, .2);
  --line-2: rgba(12, 24, 36, .55);
  --dt-toque: rgba(12, 24, 36, .06);
  --dt-toque-forte: rgba(12, 24, 36, .12);
  background-color: var(--bg);
}

/* Oliva (Pesquisas) e azul (cabeça de cartão e de projeto): creme por cima
   (7,5:1 e 9,2:1). */
html[data-dt-paleta="colorido"] body :is(.dtk-oliva, #dc-root #surveys-container :is(.dl-hero, .dl-editor-header)) {
  --bg: #48480c;
  --bg-elev: #565612;
  --surface-1: #48480c;
  --surface-2: #565612;
  --surface-3: #3e3e08;
  --chapa: #3e3e08;
  --text: #f3e3c8;
  --text-2: #f3e3c8;
  --text-3: #e9dcbc;
  --accent: #f3e3c8;
  --accent-2: #fbf3e4;
  --accent-text: #f3e3c8;
  --accent-weak: rgba(243, 227, 200, .16);
  --on-accent: #0c1824;
  --ok: #f3e3c8;
  --ok-text: #f3e3c8;
  --warn: #f3e3c8;
  --warn-text: #f3e3c8;
  --danger: #f3e3c8;
  --danger-text: #f3e3c8;
  --danger-soft: rgba(243, 227, 200, .16);
  --border: rgba(243, 227, 200, .26);
  --border-strong: rgba(243, 227, 200, .26);
  --line-2: rgba(243, 227, 200, .62);
  --dt-toque: rgba(243, 227, 200, .08);
  --dt-toque-forte: rgba(243, 227, 200, .15);
  background-color: var(--bg);
}
html[data-dt-paleta="colorido"] body :is(.dtk-azul, #dc-root #dt-config .dtcfg-cartao-cabeca, #dc-root .dl-card-kicker, #dc-root .dt-project-shell > .dt-project-header) {
  --bg: #183c54;
  --bg-elev: #1d4660;
  --surface-1: #183c54;
  --surface-2: #1d4660;
  --surface-3: #123044;
  --chapa: #153449;
  --border: rgba(243, 227, 200, .2);
  --border-strong: rgba(243, 227, 200, .2);
  --line-2: #7f9bb0;
  --text: #f3e3c8;
  --text-2: #e2d6ba;
  --text-3: #c3d0d6;
  --accent: #fc7800;
  --accent-2: #fc9000;
  --accent-text: #f3e3c8;
  --accent-weak: rgba(243, 227, 200, .14);
  --on-accent: #0c1824;
  --ok: #8fd0cc;
  --ok-text: #8fd0cc;
  --warn: #ffb347;
  --warn-text: #ffb347;
  --danger: #ffb5a3;
  --danger-text: #ffb5a3;
  --danger-soft: rgba(255, 181, 163, .14);
  --dt-toque: rgba(243, 227, 200, .08);
  --dt-toque-forte: rgba(243, 227, 200, .15);
  background-color: var(--bg);
}

/* ==========================================================================
   4. Cada módulo tem a sua cor — na barra lateral e na faixa de título
   Hoje laranja · Produtividade turquesa · Listas mostarda · Social tijolo ·
   Pesquisas oliva · Configurações creme. O item da barra lateral e a faixa de
   98px da página vestem a mesma cor: o olho sabe onde está antes de ler.
   ========================================================================== */

/* As faixas perdem o brilho metálico: a cor é chapada, como no cartaz. */
html[data-dt-paleta="colorido"] body #dc-root :is(
  .dtp-cabeca, .dtn-cabeca, #dt-config .dtcfg-cabeca,
  :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero,
  #darklist-container .dl-editor-header
) {
  background-image: none !important;
  background-color: var(--bg) !important;
  border-bottom-color: var(--border) !important;
}
html[data-dt-paleta="colorido"] body #dc-root #socialmedia-container .dl-editor-header > div:not(.sm-trilha):not(.sm-project-access) {
  background: var(--bg) !important;
}

html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"][data-modulo="produtividade"] { background: #489c9c !important; }
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"][data-modulo="listas"] { background: #cc9000 !important; }
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"][data-modulo="social"] { background: #a81800 !important; }
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"][data-modulo="pesquisas"] { background: #48480c !important; }
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"]:is([data-modulo="social"], [data-modulo="pesquisas"]),
html[data-dt-paleta="colorido"] body #dc-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"]:is([data-modulo="social"], [data-modulo="pesquisas"]) :is(svg, span) {
  color: #f3e3c8 !important;
}

/* ==========================================================================
   5. Cartões, projetos e post-its
   ========================================================================== */

/* Todo cartão de grade (ambiente, lista, projeto do Social, pesquisa) tem a
   mesma cabeça: a faixa do número e do tipo, em azul. O corpo fica no papel —
   é onde se lê — e o hover acende. */
html[data-dt-paleta="colorido"] body #dc-root .dl-card-kicker {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
html[data-dt-paleta="colorido"] body #dc-root .dl-card-kicker :is(span, svg) { color: var(--text) !important; }

/* A cabeça do projeto é a régua que separa um projeto do outro: azul cheio. */
html[data-dt-paleta="colorido"] body #dc-root .dt-project-shell > .dt-project-header {
  background: var(--bg) !important;
  color: var(--text) !important;
}
html[data-dt-paleta="colorido"] body #dc-root .dt-project-shell > .dt-project-header .dt-project-action:hover { background: var(--surface-2) !important; }

/* Post-it é post-it: âmbar claro, tinta azul-noite (10:1). O hover acende. */
html[data-dt-paleta="colorido"] body #dc-root .dt-project-shell .dt-task-card {
  --bg: #f9cf83;
  --bg-elev: #fcdca0;
  --surface-1: #f9cf83;
  --surface-2: #fcdca0;
  --surface-3: #fde6bb;
  --chapa: #f2c066;
  --text: #071019;
  --text-2: #1f3a47;
  --text-3: #33454d;
  --accent: #071019;
  --accent-2: #183c54;
  --accent-text: #071019;
  --accent-weak: rgba(12, 24, 36, .1);
  --on-accent: #f9cf83;
  --ok: #184854;
  --ok-text: #184854;
  --warn: #5a4300;
  --warn-text: #5a4300;
  --danger: #8c1500;
  --danger-text: #8c1500;
  --danger-soft: rgba(140, 21, 0, .1);
  --border: rgba(12, 24, 36, .2);
  --border-strong: rgba(12, 24, 36, .2);
  --line-2: rgba(12, 24, 36, .55);
  --dt-toque: rgba(12, 24, 36, .06);
  --dt-toque-forte: rgba(12, 24, 36, .12);
  border-color: rgba(12, 24, 36, .2) !important;
}

/* A célula cheia da faixa (criar tarefa, criar lista) é o botão principal da
   página: laranja, tinta azul-noite. Dentro do herói laranja ela não existe. */
html[data-dt-paleta="colorido"] body #dc-root .dtp-celula.e-cheia,
html[data-dt-paleta="colorido"] body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side > .dl-create-primary {
  background: #fc7800 !important;
  color: #071019 !important;
}
html[data-dt-paleta="colorido"] body #dc-root .dtp-celula.e-cheia:hover,
html[data-dt-paleta="colorido"] body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side > .dl-create-primary:hover {
  background: #fc9000 !important;
}
html[data-dt-paleta="colorido"] body #dc-root :is(.dtp-celula.e-cheia, .dl-create-primary) :is(svg, span) { color: #071019 !important; }
/* O botão principal que mora DENTRO da faixa (Novo conteúdo, no projeto aberto
   do Social; Nova pergunta, na pesquisa aberta) segue a mesma regra. */
html[data-dt-paleta="colorido"] body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-editor-header .dl-btn-primary {
  background: #fc7800 !important;
  color: #071019 !important;
}
html[data-dt-paleta="colorido"] body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-editor-header .dl-btn-primary:hover { background: #fc9000 !important; }
html[data-dt-paleta="colorido"] body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-editor-header .dl-btn-primary :is(svg, span) { color: #071019 !important; }

/* ==========================================================================
   6. Janelas
   O topo de toda janela (editor, tarefa aberta, quadro, diálogos, modais das
   Listas/Social/Pesquisas, Foco, Ideias, Notas) é azul-noite: a mesma moldura
   da barra lateral. O corpo fica no papel, e os campos no creme alto — campo
   é onde se escreve, precisa parecer mais claro que o que está em volta.
   ========================================================================== */
html[data-dt-paleta="colorido"] body :is(
  #dc-root .dt-task-editor > div:first-child, #dc-root .dtm-cabeca, #dc-root .dt-view-header, #dc-root .dt-kanban-topo,
  .dt-amb-dialogo > header, .dt-system-dialog .dt-system-dialog-topo,
  .dl-modal-overlay :is(.dl-system-modal-header, .dl-standard-modal-header),
  #dc-root .dt-floating-modal:not(.dtm) > :first-child
) {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
html[data-dt-paleta="colorido"] body :is(
  #dc-root .dt-task-editor > div:first-child, #dc-root .dtm-cabeca, #dc-root .dt-view-header, #dc-root .dt-kanban-topo,
  .dt-amb-dialogo > header, .dt-system-dialog .dt-system-dialog-topo,
  .dl-modal-overlay :is(.dl-system-modal-header, .dl-standard-modal-header),
  #dc-root .dt-floating-modal:not(.dtm) > :first-child
) :is(h2, h3, h4) { color: var(--text) !important; }

/* O véu atrás da janela é azul-noite, não preto: mantém a tela na paleta. */
html[data-dt-paleta="colorido"] body :is(.dt-modal-backdrop, .dt-system-dialog-backdrop, .dl-modal-overlay, .dtc-busca-fundo) {
  background-color: rgba(12, 24, 36, .55) !important;
}

/* Campos: creme alto, fio forte. */
html[data-dt-paleta="colorido"] body :is(#dc-root, .dl-modal-overlay, .dt-system-dialog, .dt-amb-dialogo) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .dt-task-rico) {
  background-color: #fbf3e4 !important;
}
html[data-dt-paleta="colorido"] body #dc-root :is(.dth-add, .dl-busca-listas, .dtc-busca) input { background-color: transparent !important; }

/* Contadores com opacity .7 por cima de tinta já misturada: no creme o piso
   fica a 4,1:1. Aqui o número vem inteiro. */
html[data-dt-paleta="colorido"] body #dt-notif .dt-notif-aba span { opacity: 1 !important; }

/* ==========================================================================
   7. Dicas (tooltips)
   tooltips.js copia --bg-elev, --text e --line-2 do elemento que pediu a dica,
   para ela vestir o tema. Dentro de um bloco colorido a cópia trazia a tinta do
   bloco com o fundo de outro lugar — "Adicionar Kanban" saía creme sobre creme.
   No Colorido a dica é uma só, em qualquer lugar: azul-noite, creme por cima.
   ========================================================================== */
html[data-dt-paleta="colorido"] body #dtGlobalTooltip {
  background: #0c1824 !important;
  color: #f3e3c8 !important;
  border-color: #0c1824 !important;
}