/* Tokens de design do Financeiro.
 *
 * Os valores aqui definem a identidade visual compartilhada do painel.
 *
 * Este arquivo NAO tem regra de componente, so variavel. Quem estiliza e' o
 * app.css.
 */

:root {
    /* Paleta One4 */
    --ink:      #18212b;   /* texto principal */
    --navy:     #041422;   /* sidebar e topbar */
    --teal:     #16b8a6;   /* acao primaria */
    --green:    #008545;   /* fim do gradiente da marca */
    --bg:       #eef2f6;   /* fundo da aplicacao */
    --line:     #dee6ee;   /* borda de cartao e tabela */
    --muted:    #718096;   /* texto secundario */
    --danger:   #cc3366;   /* bloqueio do cliente, acao irreversivel */
    --amber:    #f2a007;   /* aguardando terceiro */
    --white:    #fff;

    /* Tons derivados, para nao espalhar hexadecimal cru pelo app.css */
    --line-soft:    #edf1f5;
    --surface-soft: #fafcfe;
    --ink-soft:     #4a5a6b;
    --ink-dim:      #5a6b7d;

    --ok-bg:      #dff5ee;
    --ok-fg:      #08735c;
    --warn-bg:    #fff0ce;
    --warn-fg:    #956000;
    --warn-fg-dk: #7d5100;
    --bad-bg:     #fbe2ea;
    --bad-fg:     #a72b57;
    --mute-bg:    #eef2f6;
    --info-bg:    #e7f0fa;
    --info-fg:    #2b5580;
    --teal-bg:    #e7f7f5;
    --teal-fg:    #0d6d63;
    --risk-bg:    #fdf6f8;

    /* Tons de superficie da casca e dos controles. Estavam soltos no
     * app.css; vieram para ca para a regra "cor so vem de token" ser verdade. */
    --side-fg:             #d9e6ee;
    --side-link:           #b9cad5;
    --side-eyebrow:        #7f94a6;
    --side-line:           #183043;
    --badge-calm:          #33475b;
    --avatar-bg:           #d5f4ef;
    --avatar-fg:           #056b60;
    --control-off:         #c9d4dc;
    --segs-bg:             #e3e9f0;
    --seg-n-bg:            #dfe6ee;
    --step-idle-fg:        #8fa0b0;
    --panel-soft:          #f4f7fa;
    --warn-soft-bg:        #fff8e6;
    --note-fg:             #176d64;
    --side-link-hover:     rgba(22, 184, 166, .16);
    --side-active-ring:    rgba(22, 184, 166, .35);
    --side-icon:           rgba(255, 255, 255, .9);
    --shadow-soft:         rgba(4, 20, 34, .1);

    /* Tons sobre o gradiente da marca (navbar). Sao translucidos de proposito:
     * a cor da navbar muda por cliente, entao um hexadecimal fixo so ficaria
     * certo para um deles. */
    --on-brand-line:       rgba(255, 255, 255, .25);
    --on-brand-divider:    rgba(255, 255, 255, .35);
    --on-brand-chip-bg:    rgba(255, 255, 255, .14);
    --on-brand-chip-line:  rgba(255, 255, 255, .34);
    --on-brand-avatar-bg:  rgba(255, 255, 255, .18);
    --on-brand-avatar-line: rgba(255, 255, 255, .45);

    /* Tela de login: o unico template anonimo, desenha a pagina inteira. */
    --login-erro-fg:       #ffdbe5;
    --login-botao-ini:     #20c6bb;
    --login-botao-fim:     #0a9f92;

    /* Telas (telas.css). Paleta do Portal One4 usada no desenho aprovado
     * (docs/wireframes/v4). Separada da paleta da casca para as telas
     * ficarem identicas ao desenho sem mexer na sidebar e na navbar. */
    --pt-ink:        #041422;
    --pt-ink-2:      #042F47;
    --pt-text:       #3D5360;
    --pt-text-2:     #4A606D;
    --pt-text-3:     #80929C;
    --pt-text-4:     #9FAFB8;
    --pt-primary:    #10769A;
    --pt-primary-dk: #0C5C7A;
    --pt-accent:     #23EDB8;
    --pt-ok:         #34B096;
    --pt-ok-fg:      #1F7A69;
    --pt-ok-dk:      #1F6B5C;
    --pt-warn:       #C98500;
    --pt-warn-fg:    #8A5A00;
    --pt-warn-dk:    #6E4800;
    --pt-prop-fg:    #5C4300;
    --pt-danger:     #B3261E;
    --pt-danger-dk:  #8C1D17;
    --pt-code-fg:    #CFE3EA;
    --pt-env-bg:     #FFF3D6;

    /* Corpo do e-mail ao cliente: os mesmos valores que o painel grava no
     * involucro do HTML (apps/templates_email/corpo.py). A pre-visualizacao
     * editavel precisa ficar igual ao que chega na caixa de entrada. */
    --email-font:    Arial, sans-serif;
    --email-fg:      #333333;

    /* Estrutura */
    /* Sidebar: expandida e recolhida. O recolhimento e alternado pelo botao
     * da navbar (app.js) e guardado em localStorage. */
    --side:            15rem;
    --side-collapsed:  5rem;
    /* Altura da navbar. Varias telas dimensionam o painel com
     * calc(100vh - 4.25rem) -- mudar aqui exige mudar la. */
    --topbar-h:        4.25rem;
    --radius:       12px;
    --radius-sm:    8px;
    --radius-pill:  99px;

    /* Tipografia. IBM Plex Sans vem do CDN no base.html; a pilha de fallback
     * existe porque um cliente sem internet no navegador nao pode ver a tela
     * quebrar. */
    --font: "IBM Plex Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* O gradiente da topbar e' por cliente (white-label): o base.html injeta
     * --navbar-color-start/end a partir de `account_brand`. Os valores abaixo
     * sao so o fallback quando nao ha cliente resolvido. */
    --navbar-color-start: var(--navy);
    --navbar-color-meio:  var(--pt-primary);
    --navbar-color-end:   var(--pt-ok);
}