/* =============================================================================
   Flua · Tokens de marca do TratativasCX (rebrand SiMco → Flua, 19/10/2026)
   Carrega DEPOIS de tokens.css em todas as telas e sobrescreve cor e tipografia. Mesmo mecanismo de
   tema do portal: escuro = padrão (:root), claro = body.light-mode.
   Fonte da verdade: Flua-Brandbook v01 (set/2026) — paleta p.16, tipografia p.18-22.
   Valores marcados "derivado" não estão na paleta oficial — saem por color-mix
   das cores oficiais, pra não inventar hex novo.
   ============================================================================= */

:root {
    /* ---------- Paleta oficial (brandbook p.16) ---------- */
    --flua-vermelho: #F0283C;
    --flua-laranja: #FE7C45;
    --flua-amarelo: #FF960E;
    --flua-azul-escuro: #0B2C45;
    --flua-branco: #FFFFFF;
    --flua-bege: #F9F0DF;
    --flua-azul-claro: #CCEEF0;
    --accent: #FE7C45;

    /* ---------- Tipografia (brandbook p.18-20): Alan Sans; Arial é a fonte de sistema ---------- */
    --font-display: 'Alan Sans', Arial, sans-serif;
    --font-body: 'Alan Sans', Arial, sans-serif;

    /* ---------- Escuro (padrão) ---------- */
    --bg: #06192A;                                                  /* derivado (briefing): navy mais fundo */
    --bg-elev-1: #0B2C45;
    --bg-elev-2: color-mix(in srgb, #0B2C45 50%, #06192A);          /* derivado: faixa "afundada" (#082238); texto apagado 5,36:1 */
    --surface: #0B2C45;
    --surface-hover: color-mix(in srgb, #0B2C45 88%, #CCEEF0);      /* derivado */

    --primary: #CCEEF0;
    --primary-hover: color-mix(in srgb, #CCEEF0 70%, #FFFFFF);      /* derivado */
    --primary-soft: rgba(204, 238, 240, 0.12);
    --primary-border: rgba(204, 238, 240, 0.35);
    --text-inverse: #0B2C45;

    --border: rgba(204, 238, 240, 0.12);
    --border-strong: rgba(204, 238, 240, 0.24);
    --text-main: #FFFFFF;
    --text-sub: color-mix(in srgb, #CCEEF0 72%, #06192A);           /* derivado */
    --text-muted: color-mix(in srgb, #CCEEF0 66%, #06192A);         /* derivado: >= 4,6:1 em todas as superfícies */

    /* ---------- Status — pílulas e destaques (paleta de status aprovada, 19/10/2026) ----------
       Texto, bolinha e borda usam a MESMA cor; só o fundo é separado. */
    --success: #3FBF95;                                             /* fora da paleta Flua: a marca não tem verde */
    --success-text: #3FBF95;
    --success-border: #3FBF95;
    --success-soft: rgba(63, 191, 149, 0.14);

    --warning: #FF960E;
    --warning-text: #FF960E;
    --warning-border: #FF960E;
    --warning-soft: rgba(255, 150, 14, 0.10);                       /* era rgba(245,158,11,.10) — amarelo antigo → oficial */

    --danger: #F57380;
    --danger-text: #F57380;
    --danger-border: #F57380;
    --danger-soft: rgba(240, 40, 60, 0.14);

    --info: #CCEEF0;
    --info-text: #CCEEF0;
    --info-border: #CCEEF0;
    --info-soft: transparent;

    --mute: rgba(204, 238, 240, 0.60);                              /* pílula apagada: sem fundo */
    --neutral-text: rgba(204, 238, 240, 0.75);                      /* pílula sem tom: sem fundo */
    --neutral-border: rgba(204, 238, 240, 0.14);
    --badge-count-bg: rgba(240, 40, 60, 0.18);                      /* bolinha de contagem do menu/abas */

    /* Roxo não existe na paleta Flua: "Não resolvida" (único uso) passa a ser erro. */
    --purple: var(--danger);
    --purple-text: var(--danger-text);
    --purple-soft: var(--danger-soft);
    --purple-border: var(--danger-border);

    --shadow-glow: 0 0 24px rgba(204, 238, 240, 0.20);
}

body.light-mode {
    /* ---------- Claro: bege de fundo + cards brancos ("área de respiro", p.17) ---------- */
    --bg: #F9F0DF;
    --bg-elev-1: #FFFFFF;
    --bg-elev-2: #F9F0DF;
    --surface: #FFFFFF;
    --surface-hover: color-mix(in srgb, #CCEEF0 35%, #FFFFFF);      /* derivado */

    --primary: #0B2C45;
    --primary-hover: color-mix(in srgb, #0B2C45 80%, #000000);      /* derivado */
    --primary-soft: #CCEEF0;                                        /* active-bg */
    --primary-border: rgba(11, 44, 69, 0.30);
    --text-inverse: #FFFFFF;

    --border: rgba(11, 44, 69, 0.12);
    --border-strong: rgba(11, 44, 69, 0.20);
    --text-main: #0B2C45;
    --text-sub: color-mix(in srgb, #0B2C45 86%, #FFFFFF);           /* derivado */
    --text-muted: color-mix(in srgb, #0B2C45 74%, #FFFFFF);         /* derivado: 5,57:1 sobre o bege */

    /* ---------- Status — pílulas e destaques (paleta de status aprovada, 19/10/2026) ---------- */
    --success: #17765F;                                             /* fora da paleta Flua: a marca não tem verde */
    --success-text: #17765F;
    --success-border: #17765F;
    --success-soft: rgba(23, 118, 95, 0.10);

    --warning: #9A5A00;
    --warning-text: #9A5A00;
    --warning-border: #9A5A00;
    --warning-soft: rgba(255, 150, 14, 0.11);                       /* era #FEF3E2 — mesmo tom, a partir do amarelo oficial */

    --danger: #B4233A;
    --danger-text: #B4233A;
    --danger-border: #B4233A;
    --danger-soft: rgba(240, 40, 60, 0.10);                         /* era #FDECEA — mesmo tom, a partir do vermelho oficial */

    --info: #0B2C45;
    --info-text: #0B2C45;
    --info-border: #0B2C45;
    --info-soft: transparent;

    --mute: rgba(11, 44, 69, 0.50);
    --neutral-text: rgba(11, 44, 69, 0.70);
    --neutral-border: rgba(11, 44, 69, 0.12);
    --badge-count-bg: rgba(240, 40, 60, 0.10);
    --purple: var(--danger);
    --purple-text: var(--danger-text);
    --purple-soft: var(--danger-soft);
    --purple-border: var(--danger-border);

    --bg-primary: #F9F0DF;
    --bg-secondary: #FFFFFF;
    --text-primary: #0B2C45;
    --text-secondary: color-mix(in srgb, #0B2C45 86%, #FFFFFF);
    --text-tertiary: color-mix(in srgb, #0B2C45 74%, #FFFFFF);
    --border-color: rgba(11, 44, 69, 0.12);
    --accent: #FE7C45;

    --shadow-sm: 0 1px 2px rgba(11, 44, 69, 0.06);
    --shadow-md: 0 4px 12px rgba(11, 44, 69, 0.08);
    --shadow-lg: 0 12px 32px rgba(11, 44, 69, 0.12);
    --shadow-glow: 0 0 24px rgba(11, 44, 69, 0.15);
}

/* ---------- Troca de logo por tema (sem JS) ---------- */
.so-claro { display: none !important; }
body.light-mode .so-claro { display: inline-block !important; }
body.light-mode .so-escuro { display: none !important; }

/* ---------- Versão escrita da marca (brandbook p.13): "Flua" em Alan Sans regular.
   Usada onde o logo ficaria abaixo do mínimo digital (L = 140px de largura). ---------- */
.flua-escrita { font-family: 'Alan Sans', Arial, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; }