/* HarbourPulse — Design Tokens DevPulse AI
* ----------------------------------------
* Paleta e tipografia conforme o Manual da Marca DevPulse AI.
* Manual em revisão (2026-07): a grafia definitiva da marca e os valores de
* cor devem ser reconferidos contra a versão publicada.
*
* Convenção de nomes:
* --dpai-* → cor de marca (muda se a marca mudar)
* --text-*, --bg-*, --border-*, --status-* → papel semântico (estável
* mesmo que a marca mude, só o valor por trás muda)
*
* TEMA CLARO/ESCURO — o manual (§01, atributo "Viva") exige que a marca
* responda ao tema do usuário. O switch é o atributo `data-bs-theme` no
* , que é a convenção NATIVA do Bootstrap 5.3: um único atributo
* troca tanto os componentes do Bootstrap quanto os tokens daqui, sem
* risco de os dois sistemas divergirem.
*
* Tints e glows são DERIVADOS via color-mix() a partir dos tokens de marca
* e de superfície — nada de cor fixa duplicada. Trocar --dpai-primary
* repropaga por todo o sistema automaticamente.
*
* COMPONENTES RGB — por que a cor é declarada como "91, 79, 232" e não #5B4FE8
* ---------------------------------------------------------------------------
* O Bootstrap precisa de dois formatos da mesma cor: o valor (--bs-primary,
* para preenchimento) e os componentes soltos (--bs-primary-rgb, que ele
* injeta em rgba() para foco, opacidade e as variantes -subtle). CSS não sabe
* extrair componentes de um hex.
*
* Até 26/07/2026 os dois eram declarados à mão, e os 21 espelhos -rgb eram
* cópias literais. Quem trocasse --dpai-primary mudava o botão e deixava o anel
* de foco e os fundos translúcidos na cor antiga — o oposto do que o comentário
* acima prometia. A ORIGEM agora é o triplet: `--dpai-primary-rgb: 91, 79, 232`
* e `--dpai-primary: rgb(var(--dpai-primary-rgb))`. Um edite, tudo segue.
*
* Ao acrescentar cor com espelho no Bootstrap, declare o -rgb e derive o valor.
* `test_nenhum_espelho_bootstrap_tem_cor_literal` barra a regressão.
*/
:root {
/* ============ Marca — papel funcional ============ */
--dpai-primary-rgb: 91, 79, 232; /* Pulse Indigo #5B4FE8 */
--dpai-accent-rgb: 20, 184, 166; /* Pulse Teal #14B8A6 */
--dpai-link-rgb: 36, 84, 199; /* Pulse Blue #2454C7 */
/* Acento para TEXTO pequeno. O Pulse Teal do manual (#14B8A6) é uma cor
* de PREENCHIMENTO: sobre fundo claro, como texto, dá 2.38:1 — reprovado.
* (O #1488A6 da proposta de landing atacava esse mesmo problema, mas
* ainda ficava em 3.94:1.) Escurecido para 5.13:1 (AA), mantendo a matiz.
* No tema escuro o próprio acento já dá 8.90:1, então não muda. */
--dpai-accent-text: color-mix(in srgb, var(--dpai-accent) 65%, black);
/* ============ Marca — complementares (apoio, nunca cor principal) ============ */
--dpai-warm-gray: #6A5F5B;
--dpai-teal-alt: #1B9B97;
--dpai-blue-alt: #20C4F4;
--dpai-petrol: #2D5F6B;
/* ============ Texto ============ */
--text-primary-rgb: 31, 36, 48; /* Graphite Ink #1F2430 — texto, eixos de gráfico */
--text-secondary: #6B7280; /* Slate Gray — texto secundário, grid, legendas */
--text-on-brand: #FFFFFF; /* Texto sobre preenchimento de cor saturada */
/* ============ Status — semântica fixa, nunca recolorir ============ */
--status-positive-rgb: 154, 202, 60; /* #9ACA3C */
--status-warning-rgb: 253, 185, 51; /* #FDB933 */
--status-negative-rgb: 217, 64, 64; /* #D94040 */
--status-info-rgb: 32, 196, 244; /* #20C4F4 */
--status-no-data: #97999B; /* sem espelho no Bootstrap — hex direto basta */
/* Texto sobre tint de status (escurecido no claro p/ contraste AA) */
--on-tint-positive: #4F6E15;
--on-tint-warning: #7A5A0F;
--on-tint-negative: #6B1F1F;
--on-tint-info: #1D5A78;
/* Texto/borda sobre PREENCHIMENTO saturado de status (barras do calendário
* e do Gantt). Não invertem no tema escuro: o fundo dessas barras é a
* própria cor de status, que é fixa nos dois temas. */
--on-status-positive: #2C3E0A;
--on-status-warning: #5F4707;
--edge-status-positive: #4F6E15;
--edge-status-negative: #8C2929;
/* ---- Série de dados dominante (barras do calendário e do Gantt) ----
* Pulse Teal, conforme o manual §03 ("Acento · série de dados dominante").
* Escala sequencial de 2 passos: a intensidade cresce conforme a atracação
* avança (agendada → atracada).
*
* Antes do rebrand a série era âmbar (#ED8B00 / #C97700), herdada da marca
* antiga. Além de fora da marca, competia com o amarelo de "Desatracando"
* (#FDB933) e com o próprio passo seguinte: três tons quentes vizinhos na
* mesma legenda, difíceis de separar. O teal resolve os dois problemas.
*
* Derivada de --dpai-accent por color-mix: se a marca mudar, a série
* acompanha sozinha. */
--data-seq-1: color-mix(in srgb, var(--dpai-accent) 55%, white);
--data-seq-2: var(--dpai-accent);
--edge-seq-1: color-mix(in srgb, var(--dpai-accent) 75%, black);
--edge-seq-2: color-mix(in srgb, var(--dpai-accent) 55%, black);
/* Texto sobre as barras da série. Fixo nos dois temas — sobre um
* preenchimento saturado, quem manda é o fundo, não o tema. Escuro porque
* branco sobre teal dá 2.49:1 (reprovado); este dá 12.6:1 no passo 1 e
* 6.66:1 no passo 2, ambos AA. */
--on-data-seq: #14161F;
/* Barras de "Cancelada" e "Concluída": fundo escuro, então o texto padrão
* escuro da barra reprovaria (4.09:1 e 3.73:1). Levam texto branco.
*
* Fixas nos dois temas de propósito: são marcas de DADO num gráfico, não
* cromo de interface — uma barra não precisa mudar de cor porque o entorno
* mudou, e fixá-las evita que o texto branco caia sobre o cinza claro do
* tema escuro (daria 2.54:1).
*
* O vermelho é levemente escurecido: branco sobre #D94040 puro dá 4.41:1,
* a 0.09 do mínimo. Mesma matiz, só luminosidade — a semântica de "crítico"
* do manual §03 é preservada. */
--bar-negative-bg: #B83636; /* branco: 5.80:1 (AA) */
--bar-neutral-bg: #6B7280; /* branco: 4.83:1 (AA) */
--on-bar-inverse: #FFFFFF;
/* ============ Neutros (estrutura e fundos) ============ */
--bg-page-rgb: 250, 250, 248; /* #FAFAF8 */
--bg-alt-rgb: 245, 245, 245; /* #F5F5F5 */
--bg-card: #FFFFFF;
--border-card: #EFECE8;
--border-warm: #E8E5E1;
--ink-deep-rgb: 27, 30, 43; /* Pulse Navy #1B1E2B — navbar, sidebar, fundos escuros */
/* ============ Superfícies derivadas ============ */
--bg-hover: color-mix(in srgb, var(--text-primary) 6%, var(--bg-card));
--bg-subtle: color-mix(in srgb, var(--text-primary) 4%, var(--bg-page));
/* Cabeçalho de tabela / faixa de eixo do Gantt. No claro é uma faixa escura
* com texto claro; no escuro NÃO pode simplesmente inverter (viraria uma
* faixa quase branca, ofuscante) — lá vira uma superfície elevada. */
--bg-header: var(--text-primary);
--on-header: var(--bg-card);
/* ============ Tints de marca (derivados) ============ */
--tint-brand-soft: color-mix(in srgb, var(--dpai-primary) 8%, transparent);
--tint-brand-faint: color-mix(in srgb, var(--dpai-primary) 4%, transparent);
--glow-brand: 0 0 6px color-mix(in srgb, var(--dpai-primary) 45%, transparent);
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--dpai-link) 25%, transparent);
--focus-outline: 3px solid color-mix(in srgb, var(--dpai-link) 40%, transparent);
/* ============ Tints de status (derivados da cor semântica) ============ */
--tint-positive: color-mix(in srgb, var(--status-positive) 22%, var(--bg-card));
--tint-warning: color-mix(in srgb, var(--status-warning) 22%, var(--bg-card));
--tint-negative: color-mix(in srgb, var(--status-negative) 16%, var(--bg-card));
--tint-info: color-mix(in srgb, var(--status-info) 16%, var(--bg-card));
--tint-border-positive: color-mix(in srgb, var(--status-positive) 50%, var(--bg-card));
--tint-border-warning: color-mix(in srgb, var(--status-warning) 50%, var(--bg-card));
--tint-border-negative: color-mix(in srgb, var(--status-negative) 40%, var(--bg-card));
--tint-border-info: color-mix(in srgb, var(--status-info) 40%, var(--bg-card));
/* ============ Overlays neutros (bordas/hover sobre superfície colorida) ============ */
--overlay-border: rgba(0, 0, 0, 0.08);
--overlay-border-strong: rgba(0, 0, 0, 0.18);
--overlay-hover: rgba(255, 255, 255, 0.6);
--overlay-divider: rgba(255, 255, 255, 0.15);
/* ============ Tipografia ============ */
--font-stack: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
/* Manual §04 — utilitária monoespaçada: código, valores de cor, nomes de
* variável, specs técnicas. Reforça a origem "para desenvolvedores" da
* marca. Nunca usar em texto corrido. */
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--font-size-base: 15px;
--font-size-sm: 13px;
/* ⚠️ Abaixo do piso do manual. A escala da §04 termina em 13px; estes dois
* existem porque a interface usa 11px e 12px em rótulo de tabela, badge e
* legenda. Tokenizados com o valor QUE JÁ ESTAVA em uso (nenhuma mudança
* visual) para que a correção, quando vier, seja num lugar só. */
--font-size-xs: 12px;
--font-size-xxs: 11px;
--font-size-lg: 17px;
--font-size-xl: 22px;
--font-size-xxl: 32px;
/* ============ Espaçamento e raio ============ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 48px;
/* Largura de contêiner de formulário e de callout. Eram literais repetidos
* em 8 templates; um ajuste de leitura exigia 8 edições. */
--width-form-sm: 560px;
--width-form: 640px;
--width-form-lg: 720px;
/* Espessura da faixa de acento de status (barra do KPI, borda do callout,
* barra da .alert). Estava escrita 3px em 12 lugares — CSS e 8 templates. */
--accent-bar: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
/* ============ Sombra (sutil) ============ */
--shadow-card: 0 1px 2px rgba(28, 28, 40, 0.04), 0 2px 6px rgba(28, 28, 40, 0.04);
--shadow-elev: 0 4px 12px rgba(28, 28, 40, 0.08);
/* ============ Tema Bootstrap 5.3 — API de CSS variables ============
* Bootstrap 5.3 lê estas variáveis em tempo real nos próprios componentes
* (.btn-primary, .text-primary, .form-control:focus, etc.) sem precisar
* recompilar Sass. Mantém os tokens --dpai-*/--text-* acima como fonte
* única da verdade; aqui só espelhamos pro namespace do Bootstrap.
*/
--bs-primary: var(--dpai-primary);
--bs-primary-rgb: var(--dpai-primary-rgb);
--bs-secondary: var(--dpai-link);
--bs-secondary-rgb: var(--dpai-link-rgb);
--bs-success: var(--status-positive);
--bs-success-rgb: var(--status-positive-rgb);
--bs-info: var(--status-info);
--bs-info-rgb: var(--status-info-rgb);
--bs-warning: var(--status-warning);
--bs-warning-rgb: var(--status-warning-rgb);
--bs-danger: var(--status-negative);
--bs-danger-rgb: var(--status-negative-rgb);
--bs-light: var(--bg-page);
--bs-light-rgb: var(--bg-page-rgb);
--bs-dark: var(--ink-deep);
--bs-dark-rgb: var(--ink-deep-rgb);
--bs-body-color: var(--text-primary);
--bs-body-color-rgb: var(--text-primary-rgb);
--bs-body-bg: var(--bg-page);
--bs-body-bg-rgb: var(--bg-page-rgb);
--bs-border-color: var(--border-card);
--bs-link-color: var(--dpai-link);
--bs-link-color-rgb: var(--dpai-link-rgb);
--bs-link-hover-color: var(--dpai-primary);
--bs-link-hover-color-rgb: var(--dpai-primary-rgb);
--bs-font-sans-serif: var(--font-stack);
/* Triplets "subtle" do Bootstrap (fundo/borda/texto de alerts, callouts).
* Apontam pros nossos tints, que já são derivados por color-mix e já
* invertem no tema escuro — por isso não precisam ser redeclarados no
* bloco [data-bs-theme="dark"] abaixo.
*
* Cascata: o Bootstrap declara estes mesmos nomes dentro do próprio
* [data-bs-theme=dark]. Especificidade é idêntica (:root e [attr] valem
* 0,1,0), então quem vence é a origem mais tardia — e tokens.css é
* carregado depois de bootstrap.min.css. Daí estas declarações valerem
* nos dois temas. Se a ordem dos em base.html mudar, isto quebra. */
--bs-success-bg-subtle: var(--tint-positive);
--bs-success-border-subtle: var(--tint-border-positive);
--bs-success-text-emphasis: var(--on-tint-positive);
--bs-danger-bg-subtle: var(--tint-negative);
--bs-danger-border-subtle: var(--tint-border-negative);
--bs-danger-text-emphasis: var(--on-tint-negative);
--bs-warning-bg-subtle: var(--tint-warning);
--bs-warning-border-subtle: var(--tint-border-warning);
--bs-warning-text-emphasis: var(--on-tint-warning);
--bs-info-bg-subtle: var(--tint-info);
--bs-info-border-subtle: var(--tint-border-info);
--bs-info-text-emphasis: var(--on-tint-info);
--bs-secondary-bg-subtle: var(--bg-alt);
--bs-secondary-border-subtle: var(--border-warm);
--bs-secondary-text-emphasis: var(--text-secondary);
}
/* =====================================================================
* VALORES DERIVADOS DOS TRIPLETS
* ---------------------------------------------------------------------
* Uma fórmula, os dois temas. O seletor casa com o :root E com qualquer
* elemento que carregue data-bs-theme, de propósito: o Bootstrap 5.3
* permite escopar o tema numa seção (`
`), e nesse
* caso a cor precisa ser RECALCULADA ali, a partir do triplet que vale
* naquele escopo.
*
* Se estas linhas vivessem só no :root, um tema escopado herdaria a cor já
* resolvida do ancestral e ignoraria o próprio triplet — o bloco ficaria com
* o fundo escuro e o texto do tema claro. Hoje o atributo só é aplicado no
* (core/static/core/js/theme.js), então o defeito não apareceria; isto
* é para não aparecer no dia em que alguém escopar.
* ===================================================================== */
:root,
[data-bs-theme] {
--dpai-primary: rgb(var(--dpai-primary-rgb));
--dpai-accent: rgb(var(--dpai-accent-rgb));
--dpai-link: rgb(var(--dpai-link-rgb));
--text-primary: rgb(var(--text-primary-rgb));
--status-positive: rgb(var(--status-positive-rgb));
--status-warning: rgb(var(--status-warning-rgb));
--status-negative: rgb(var(--status-negative-rgb));
--status-info: rgb(var(--status-info-rgb));
--bg-page: rgb(var(--bg-page-rgb));
--bg-alt: rgb(var(--bg-alt-rgb));
--ink-deep: rgb(var(--ink-deep-rgb));
}
/* =====================================================================
* TEMA ESCURO
* ---------------------------------------------------------------------
* Fundo em Pulse Navy (#1B1E2B), conforme o manual §03 ("Pulse Navy —
* navbar, sidebar, fundos escuros").
*
* Indigo e vermelho de status são CLAREADOS aqui: os valores de tema claro
* não atingem contraste AA sobre navy (Pulse Indigo puro dá 2.94:1 — abaixo
* do mínimo de 4.5:1 para texto). A semântica não muda, só a luminosidade —
* o manual §03 já abre esse precedente ao definir o teal escuro (#2BD4C0)
* como variante do "Ai" em fundo escuro.
*
* Este bloco precisa vir DEPOIS do bootstrap.min.css no para
* sobrescrever o [data-bs-theme=dark] nativo do Bootstrap — a ordem em
* base.html (bootstrap → tokens → app) garante isso.
* ===================================================================== */
[data-bs-theme="dark"] {
/* Marca clareada p/ legibilidade sobre navy */
--dpai-primary-rgb: 139, 130, 240; /* #8B82F0 — 5.17:1 sobre navy (AA) */
--dpai-accent-rgb: 43, 212, 192; /* #2BD4C0 — manual §02, 8.91:1 (AAA) */
--dpai-link-rgb: 139, 130, 240; /* #8B82F0 */
--dpai-accent-text: var(--dpai-accent); /* 8.90:1 sobre navy */
/* Texto */
--text-primary-rgb: 232, 234, 237; /* #E8EAED — 13.75:1 sobre navy (AAA) */
--text-secondary: #9CA3AF; /* 6.53:1 sobre navy (AA) */
--text-on-brand: #14161F; /* Texto sobre fill claro no tema escuro */
/* Status — mesma semântica, luminosidade ajustada onde o contraste exigia */
--status-negative-rgb: 239, 107, 107; /* #EF6B6B — 5.51:1 sobre navy (AA); o
* #D94040 do claro daria 3.76:1 */
/* Texto sobre tint de status — no escuro o tint é escuro, então o texto clareia */
--on-tint-positive: #C3E389;
--on-tint-warning: #FDD98A;
--on-tint-negative: #F5A9A9;
--on-tint-info: #8FDCF7;
/* Superfícies */
--bg-page-rgb: 27, 30, 43; /* Pulse Navy #1B1E2B */
--bg-alt-rgb: 42, 46, 61; /* #2A2E3D */
--bg-card: #242835;
--border-card: #333846;
--border-warm: #3A3F4E;
--ink-deep-rgb: 20, 22, 31; /* #14161F */
/* Header de tabela: superfície elevada + texto claro (não a inversão do
* tema claro, que produziria uma faixa branca ofuscante sobre navy). */
--bg-header: #2F3444;
--on-header: var(--text-primary);
/* Overlays invertem sentido no escuro */
--overlay-border: rgba(255, 255, 255, 0.10);
--overlay-border-strong: rgba(255, 255, 255, 0.22);
--overlay-hover: rgba(255, 255, 255, 0.10);
--overlay-divider: rgba(255, 255, 255, 0.12);
/* Sombras precisam ser mais densas p/ ler sobre fundo escuro */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.24);
--shadow-elev: 0 4px 12px rgba(0, 0, 0, 0.45);
/* Espelho Bootstrap — só o que NÃO deriva sozinho.
* Os 7 que estavam aqui (--bs-primary-rgb, -secondary-rgb, -danger-rgb,
* -body-color-rgb, -body-bg-rgb, -link-color-rgb, -dark-rgb) foram removidos:
* apontam para as origens do :root, que este bloco já redeclarou acima. Eram
* cópias que precisavam ser mantidas em sincronia à mão.
*
* Estes dois ficam porque a ORIGEM difere entre os temas, não o valor:
* link em hover → primária no claro, acento no escuro
* --bs-light → fundo da página no claro, superfície alternativa no escuro */
--bs-link-hover-color: var(--dpai-accent);
--bs-link-hover-color-rgb: var(--dpai-accent-rgb);
--bs-light: var(--bg-alt);
--bs-light-rgb: var(--bg-alt-rgb);
--bs-emphasis-color: var(--text-primary);
--bs-secondary-color: var(--text-secondary);
--bs-secondary-bg: var(--bg-alt);
--bs-tertiary-bg: var(--bg-card);
}