/* ============================================================
   Flagy — camada de tokens (Direção A: ferramenta)
   ============================================================

   Fonte única de verdade do visual. Regras:

   1. Claro e escuro são AMBOS explícitos. Nada de `var(--x, #fff)` com
      fallback embutido — era isso que espalhava ~520 cores pelo projeto.
   2. Cor só entra quando significa alguma coisa (estado, semântica, marca).
      O resto é neutro.
   3. Todo par tinta/fundo é verificado em AA por tests/tokens-contraste.mjs.
      Mudou um valor aqui, roda o verificador.

   CARREGAR DEPOIS de app.css: o app.css veio do ClinPlus e define os --mc-*
   com valores próprios; aqui eles são reapontados para os tokens novos, o que
   conserta o tema claro em todas as telas de uma vez.
   ============================================================ */

:root {
    color-scheme: light;

    /* ===== Marca =====
       Roxo #401579 e amarelo #FFC500 são os dois tons do logotipo da Flagy.

       O roxo é MUITO escuro (branco em cima dá 13:1), e isso inverte uma
       convenção: aqui o hover CLAREIA em vez de escurecer. Escurecer um tom que
       já está perto do preto não se enxerga — e um botão que não reage ao mouse
       parece quebrado. O estado pressionado é que escurece.

       O amarelo nunca recebe texto branco: 1.59:1. Onde ele for fundo, a tinta
       é o próprio roxo (8.27:1). */
    --fm-marca: #401579;        /* fundo de botão primário (texto branco por cima) */
    --fm-marca-link: #5B21B6;   /* marca como TEXTO sobre superfície — token à parte de propósito:
                                   o tom do logotipo é tão escuro que como link leria quase preto */
    --fm-marca-forte: #52209A;  /* hover: clareia, ver acima */
    --fm-marca-ativa: #2E0F58;  /* pressionado: aí sim escurece */
    --fm-marca-fundo: #F4EFFC;
    --fm-marca-tinta: #401579;
    --fm-marca-contorno: #D9C9F0;

    /* Amarelo do logotipo. Acento, não ação: chama atenção sem competir com o
       botão primário. Sempre com tinta escura por cima. */
    --fm-destaque: #FFC500;
    --fm-destaque-tinta: #401579;

    /* ===== Superfícies e bordas ===== */
    --fm-fundo: #F7F8FA;
    --fm-superficie: #FFFFFF;
    --fm-superficie-2: #F2F4F7;
    --fm-superficie-3: #E9ECF1;
    --fm-borda: #E4E7EC;        /* separador decorativo — não precisa de 3:1 */
    --fm-borda-forte: #79818E;  /* contorno de campo/controle — WCAG 1.4.11 exige 3:1 */

    /* ===== Texto ===== */
    --fm-texto-forte: #0F1115;
    --fm-texto: #3A4150;
    --fm-texto-fraco: #5A616E;   /* 6.1:1 no branco — o antigo "muted" tinha 3.75 */
    --fm-texto-sobre-marca: #FFFFFF;

    /* ===== Semânticas ===== */
    --fm-sucesso: #12855F;
    --fm-sucesso-fundo: #E8F7F0;
    --fm-sucesso-tinta: #0A6B4A;
    --fm-aviso: #B54708;
    --fm-aviso-fundo: #FEF6E7;
    --fm-aviso-tinta: #93370D;
    --fm-erro: #D92D20;
    --fm-erro-fundo: #FEECEB;
    --fm-erro-tinta: #B42318;
    /* A tinta que vai EM CIMA do erro, num botão cheio. No claro o vermelho é
       escuro e aceita branco (5.4:1); no escuro ele é claro e não aceita —
       ver o valor do tema escuro. */
    --fm-sobre-erro: #FFFFFF;
    --fm-info: #175CD3;
    --fm-info-fundo: #EFF4FF;
    --fm-info-tinta: #1549A8;

    /* ===== Estados da conversa =====
       Saíram do JavaScript da inbox (eram duas fontes de verdade e já tinham
       divergido). O par fundo/tinta é o que resolve o 1,17:1 do kanban. */
    --fm-estado-fluxo: #7C3AED;
    --fm-estado-fluxo-fundo: #F2EEFE;
    --fm-estado-fluxo-tinta: #5B21B6;
    --fm-estado-ia: #DB2777;
    --fm-estado-ia-fundo: #FDEEF6;
    --fm-estado-ia-tinta: #9D174D;
    --fm-estado-fila: #D97706;
    --fm-estado-fila-fundo: #FEF6E7;
    --fm-estado-fila-tinta: #93370D;
    --fm-estado-atendimento: #2563EB;
    --fm-estado-atendimento-fundo: #EFF4FF;
    --fm-estado-atendimento-tinta: #1549A8;
    --fm-estado-aguardando: #0D9488;
    --fm-estado-aguardando-fundo: #E6F5F4;
    --fm-estado-aguardando-tinta: #0B5E5E;
    --fm-estado-resolvida: #12855F;
    --fm-estado-resolvida-fundo: #E8F7F0;
    --fm-estado-resolvida-tinta: #0A6B4A;

    /* ===== Categorias de template (ligadas a dinheiro, cor própria) ===== */
    --fm-tpl-utilidade-fundo: #EFF4FF;
    --fm-tpl-utilidade-tinta: #1549A8;
    --fm-tpl-marketing-fundo: #FEF6E7;
    --fm-tpl-marketing-tinta: #93370D;
    --fm-tpl-autenticacao-fundo: #F2F4F7;
    --fm-tpl-autenticacao-tinta: #384250;

    /* ===== Tipografia ===== */
    --fm-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fm-t-xs: .75rem;      /* 12px — metadado */
    --fm-t-sm: .8125rem;    /* 13px — tabela, apoio */
    --fm-t-base: .875rem;   /* 14px — corpo da ferramenta */
    --fm-t-md: 1rem;        /* 16px — corpo de leitura */
    --fm-t-lg: 1.25rem;     /* 20px — título de seção */
    --fm-t-xl: 1.75rem;     /* 28px — título de página */
    --fm-t-hero: 2.25rem;   /* 36px — número de destaque */
    --fm-peso-normal: 400;
    --fm-peso-medio: 500;
    --fm-peso-forte: 600;
    --fm-peso-extra: 700;
    --fm-altura-densa: 1.35;
    --fm-altura-normal: 1.55;

    /* ===== Espaçamento (base 4px) ===== */
    --fm-e1: 4px;
    --fm-e2: 8px;
    --fm-e3: 12px;
    --fm-e4: 16px;
    --fm-e5: 24px;
    --fm-e6: 32px;
    --fm-e7: 48px;

    /* ===== Raio, sombra, foco ===== */
    --fm-raio-sm: 4px;
    --fm-raio: 6px;
    --fm-raio-lg: 8px;
    --fm-raio-pill: 999px;
    --fm-sombra-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --fm-sombra: 0 4px 10px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --fm-sombra-lg: 0 16px 32px -8px rgba(16, 24, 40, .16);

    /* Dica flutuante (menu recolhido). Escura no tema claro: uma dica com o
       mesmo fundo da superfície se confunde com o conteúdo por trás. */
    --fm-dica-fundo: #1E293B;
    --fm-dica-tinta: #F8FAFC;
    --fm-foco: 0 0 0 3px rgba(64, 21, 121, .28);

    /* ===== Camadas ===== */
    --fm-z-base: 1;
    --fm-z-sticky: 100;
    --fm-z-suspenso: 200;
    --fm-z-gaveta: 300;
    --fm-z-modal: 400;
    --fm-z-aviso: 500;

    /* ===== Alvo de toque mínimo (a auditoria achou alvos de 14px) ===== */
    --fm-alvo: 24px;
    --fm-alvo-toque: 44px;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    /* No escuro o roxo do logotipo sumiria contra a superfície. Este tom tem
       exatamente o mesmo perfil do indigo que ele substituiu — branco em cima
       5.01:1, e 3.54:1 contra a superfície — então a troca é de tom, não de
       acessibilidade. */
    --fm-marca: #8A4FD8;
    --fm-marca-link: #CDB2F5;   /* clareado para passar como texto no fundo escuro */
    --fm-marca-forte: #9D6AE0;
    --fm-marca-ativa: #B288EA;
    --fm-marca-fundo: #231043;
    --fm-marca-tinta: #D8C5F5;
    --fm-marca-contorno: #4A2585;

    --fm-destaque: #FFC500;
    --fm-destaque-tinta: #2E0F58;

    /* Os neutros do escuro são os mesmos do site: preto-roxo em vez de
       cinza-azulado, para o painel e a página de apresentação parecerem o
       mesmo produto.

       A troca foi de TOM, não de contraste. Cada degrau foi recalculado para
       cair no mesmo L* (luminosidade perceptual) do cinza que substituiu, e
       cada par foi medido antes de entrar — `node tests/ferramentas/contraste.mjs`
       imprime a tabela. Trocar tom "no olho" é o jeito clássico de derrubar
       meio ponto de contraste num texto secundário sem ninguém ver.

       As superfícies saem de um véu branco sobre o roxo do site, que é como o
       próprio site as compõe: assim o croma cai sozinho conforme o degrau
       clareia, e uma borda não vira enfeite roxo em cima de tabela. */
    --fm-fundo: #0A0614;
    --fm-superficie: #1C1135;
    --fm-superficie-2: #24193C;
    --fm-superficie-3: #2F2445;
    --fm-borda: #2F2445;
    --fm-borda-forte: #756E84;

    --fm-texto-forte: #F4F1FA;
    --fm-texto: #D2C7E8;
    --fm-texto-fraco: #A49DB6;
    --fm-texto-sobre-marca: #FFFFFF;

    --fm-sucesso: #34D399;
    --fm-sucesso-fundo: #0B2E22;
    --fm-sucesso-tinta: #6EE7B7;
    --fm-aviso: #FBBF24;
    --fm-aviso-fundo: #33240A;
    --fm-aviso-tinta: #FCD34D;
    --fm-erro: #F87171;
    --fm-erro-fundo: #3A1412;
    --fm-erro-tinta: #FCA5A5;
    /* Branco em cima deste vermelho dá 2.77:1 — reprova. A tinta aqui é
       escura, 5.89:1, pela mesma regra que já vale para o amarelo da marca:
       fundo claro pede tinta escura, e não o contrário. */
    --fm-sobre-erro: #3A1412;
    --fm-info: #60A5FA;
    --fm-info-fundo: #10243F;
    --fm-info-tinta: #93C5FD;

    --fm-estado-fluxo: #A78BFA;
    --fm-estado-fluxo-fundo: #241A45;
    --fm-estado-fluxo-tinta: #C4B5FD;
    --fm-estado-ia: #F472B6;
    --fm-estado-ia-fundo: #3B1029;
    --fm-estado-ia-tinta: #F9A8D4;
    --fm-estado-fila: #FBBF24;
    --fm-estado-fila-fundo: #33240A;
    --fm-estado-fila-tinta: #FCD34D;
    --fm-estado-atendimento: #60A5FA;
    --fm-estado-atendimento-fundo: #10243F;
    --fm-estado-atendimento-tinta: #93C5FD;
    --fm-estado-aguardando: #2DD4BF;
    --fm-estado-aguardando-fundo: #0A2E2C;
    --fm-estado-aguardando-tinta: #5EEAD4;
    --fm-estado-resolvida: #34D399;
    --fm-estado-resolvida-fundo: #0B2E22;
    --fm-estado-resolvida-tinta: #6EE7B7;

    --fm-tpl-utilidade-fundo: #10243F;
    --fm-tpl-utilidade-tinta: #93C5FD;
    --fm-tpl-marketing-fundo: #33240A;
    --fm-tpl-marketing-tinta: #FCD34D;
    --fm-tpl-autenticacao-fundo: #252A36;
    --fm-tpl-autenticacao-tinta: #C7CDD8;

    --fm-sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --fm-sombra: 0 4px 10px -2px rgba(0, 0, 0, .5);
    --fm-sombra-lg: 0 16px 32px -8px rgba(0, 0, 0, .6);

    /* No escuro a dica INVERTE: fica clara. Preto sobre preto desaparece. */
    --fm-dica-fundo: #E2E8F0;
    --fm-dica-tinta: #0F172A;
    --fm-foco: 0 0 0 3px rgba(157, 106, 224, .35);
}

/* ============================================================
   Ponte com o que já existe
   ------------------------------------------------------------
   Os --mc-* vieram do ClinPlus e no tema CLARO nunca foram definidos: cada uso
   carregava um fallback (`var(--mc-surface, #fff)`). Reapontando-os aqui, as 20
   telas e as 3 ilhas Vue passam a usar os tokens novos sem eu tocar nelas.
   ============================================================ */
:root,
[data-bs-theme="dark"] {
    --mc-primary: var(--fm-marca);
    --mc-primary-dark: var(--fm-marca-forte);
    --mc-body-bg: var(--fm-fundo);
    --mc-surface: var(--fm-superficie);
    --mc-surface-2: var(--fm-superficie-2);
    --mc-surface-3: var(--fm-superficie-3);
    --mc-surface-4: var(--fm-superficie-3);
    --mc-border: var(--fm-borda);
    --mc-text: var(--fm-texto);
    --mc-text-muted: var(--fm-texto-fraco);
    --mc-text-strong: var(--fm-texto-forte);

    /* Bootstrap segue o tema sem sobrescrita manual em cada componente. */
    --bs-primary: var(--fm-marca);
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: var(--fm-marca-link);
    /* O Bootstrap 5.3 pinta <a> com rgba(var(--bs-link-color-rgb), …), então só
       trocar --bs-link-color não muda nada: os links continuavam no azul padrão. */
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--fm-marca-forte);
    --bs-body-bg: var(--fm-fundo);
    --bs-body-color: var(--fm-texto);
    --bs-border-color: var(--fm-borda);
    --bs-secondary-color: var(--fm-texto-fraco);
    --bs-emphasis-color: var(--fm-texto-forte);
    --bs-border-radius: var(--fm-raio);
    --bs-border-radius-sm: var(--fm-raio-sm);
    --bs-border-radius-lg: var(--fm-raio-lg);
    --bs-font-sans-serif: var(--fm-fonte);
}

[data-bs-theme="dark"] {
    --bs-primary-rgb: 90, 93, 234;
    --bs-link-color-rgb: 165, 180, 252;
}

/* A sidebar do ClinPlus era escura em qualquer tema; aqui ela acompanha a superfície. */
:root {
    --mc-sidebar-bg: var(--fm-superficie);
    --mc-sidebar-hover: var(--fm-superficie-2);
    --mc-sidebar-text: var(--fm-texto);
    --mc-sidebar-active: var(--fm-texto-forte);
}