/* ============================================================
 * AvisaAí — tokens.css
 *
 * A paleta inteira do sistema, e nada além dela. Trocar a marca
 * do produto é editar --brand aqui: nenhum outro arquivo carrega
 * cor literal.
 *
 * Carregado por todas as bases (base.html, base_painel.html) e
 * também pelas folhas de impressão de QR Code, que antes tinham
 * paleta própria.
 *
 * Três temas: escuro (padrão), claro e papel.
 * ============================================================ */

/* ============================================================
 * TOKENS — paleta "ember" (tema escuro, que é o padrão).
 *
 * Neutros de viés quente (carvão) em vez do azul-ardósia, e
 * laranja terroso como marca. O âmbar saiu do conjunto de estados
 * de propósito: como a marca já é laranja, "atenção" precisa ser
 * outra matiz, senão botão principal e SLA estourado se confundem.
 *
 * Contraste (WCAG 2.1) sobre --ground: ink 16,0 · muted 6,6 ·
 * brand 5,9 · aberta 7,2 · resolvida 6,0 · atrasada 5,5. Todos
 * passam em AA, e nenhum chega ao contraste estourado.
 *
 * O tema claro sobrescreve este bloco em painel.css.
 * ============================================================ */
:root {
    /* ---- Neutros quentes ---- */
    --ground: #17161A;              /* Fundo da aplicação */
    --surface: #201F24;             /* Cartão, sidebar, topbar */
    --surface-alt: #26252B;         /* Cabeçalho de tabela, hover */
    --rule: #302E33;                /* Bordas e divisórias */
    --rule-strong: #423F46;         /* Borda em foco / item ativo */
    --ink: #F4F1EE;                 /* Títulos */
    --body: #DCD7D1;                /* Texto corrido */
    --muted: #A39C95;               /* Texto secundário */

    /* ---- Marca ----
       O croma (OKLCH) é 0,130. Já foi 0,162, e nesse valor a marca
       ficava fora da faixa do próprio sistema: "aberta" tem 0,066 e
       "resolvida" 0,089. Ser duas vezes mais saturada que o resto da
       paleta, sendo a cor mais repetida da tela, é o que dava a
       sensação de peso depois de alguns minutos de uso.
       A luminosidade não mudou, então o contraste também não. */
    --brand: #DA7A55;               /* Ação principal, foco, link */
    --brand-rgb: 218, 122, 85;      /* Para tintas rgba(var(--brand-rgb), α) */
    --brand-deep: #EA9773;          /* Hover */
    --brand-tint: #382017;          /* Fundo de destaque leve */
    --brand-glow: rgba(218, 122, 85, 0.18);
    --brand-contrast: #1B1A18;      /* Texto sobre a marca */
    --brand-contrast-rgb: 27, 26, 24;
    /* Conteúdo desenhado SOBRE a marca — banner, pill, faixa colorida.
       Ali o fundo não é o do app, então superfície e régua normais não
       servem: viram mancha opaca. Estes são tinta translúcida da
       própria cor que lê sobre a marca. */
    --on-brand-bloom: rgba(27, 26, 24, 0.08);
    --on-brand-rule: rgba(27, 26, 24, 0.25);

    /* ---- Estados da ocorrência ---- */
    --state-open: #7FA8C9;          /* Aberta */
    --state-doing: var(--brand);    /* Em andamento, atenção, "monitorar" */
    --state-done: #5FA37E;          /* Resolvida */
    --state-late: #E0687C;          /* SLA estourado */
    --state-open-rgb: 127, 168, 201;
    --state-done-rgb: 95, 163, 126;
    --state-late-rgb: 224, 104, 124;

    /* Variante para texto sobre a própria tinta do estado. O chip
       pinta o fundo com 12% da cor e escreve com ela por cima; a cor
       cheia dava 4,28:1 no "SLA estourado" — reprovava. Estas ficam
       um passo mais longe da superfície: mais claras no tema escuro,
       mais escuras no claro. */
    --state-open-deep: #A3C4DC;
    --state-done-deep: #7FBF9A;
    --state-late-deep: #EE8B9B;

    /* ---- Escala categórica (gráficos) ----
       Estado é uma escala de severidade; categoria não é. Um gráfico
       de "ocorrências por categoria" precisa de matizes que se
       distingam entre si, e reaproveitar os tokens de estado
       repetiria cor em fatias diferentes. Sete tons, todos acima de
       3:1 contra o fundo, na mesma família quente da marca. */
    --cat-1: #DA7A55;               /* ember — a marca abre a série */
    --cat-2: #7FA8C9;               /* ardósia */
    --cat-3: #5FA37E;               /* musgo */
    --cat-4: #E0687C;               /* rosa */
    --cat-5: #C9A227;               /* ocre */
    --cat-6: #A98BC4;               /* ameixa */
    --cat-7: #4FB3B3;               /* turquesa */

    /* ---- Cores de Brilho dos Níveis de Gamificação ---- */
    --glow-bronze: rgba(205, 127, 50, 0.4);
    --glow-silver: rgba(192, 192, 192, 0.4);
    --glow-gold: rgba(255, 215, 0, 0.45);

    /* ------------------------------------------------------------
     * Compatibilidade — nomes antigos apontando para os novos.
     *
     * --accent-purple não é mais roxo há duas fases, e os nomes
     * "glass" descrevem um vidro fosco que já saiu. Continuam vivos
     * porque ainda são citados nos 542 atributos style= dos
     * templates; saem quando esses inline styles virarem classe.
     * Nenhum deles carrega cor própria: são só apelidos.
     * ------------------------------------------------------------ */
    --bg-primary: var(--ground);
    --bg-secondary: var(--surface);
    --text-primary: var(--body);
    --text-secondary: var(--muted);
    --border-glass: var(--rule);
    --bg-glass: var(--surface);
    --bg-glass-hover: var(--surface-alt);
    --accent-purple: var(--brand);
    --accent-purple-glow: var(--brand-glow);
    --accent-emerald: var(--state-done);
    --accent-emerald-glow: rgba(95, 163, 126, 0.22);
    --accent-crimson: var(--state-late);
}

/* ============================================================
 * TOKENS — tema claro
 *
 * Três estados, não dois. O usuário pode escolher claro, escolher
 * escuro, ou não escolher nada — e "nada" é o estado da maioria.
 * Nesse caso vale o que o sistema operacional diz, via
 * prefers-color-scheme: hospital e indústria costumam operar em
 * sala clara e máquina configurada em claro.
 *
 *   html[data-theme="light"]  → claro, escolhido
 *   html[data-theme="dark"]   → escuro, escolhido
 *   sem atributo              → o que o sistema pedir
 *
 * O botão da topbar grava a escolha e troca o atributo no <html>,
 * então o tema muda na hora, sem recarregar.
 *
 * A classe .light-mode NÃO entra aqui de propósito. Ela existia como
 * segunda fonte de verdade e derivava: com o sistema em escuro e a
 * classe pendurada no body de uma sessão anterior, a tela ficava
 * clara contra a vontade do sistema. Agora ela é só um gancho que o
 * JavaScript mantém para código legado — quem manda é o atributo.
 *
 * Os valores ficam em --light-* para existirem uma vez só, já que
 * precisam ser aplicados em três seletores diferentes.
 *
 * Contraste sobre --ground: ink 16,7 · body 13,7 · muted 5,3 ·
 * brand 5,1 · aberta 6,9 · resolvida 6,1 · atrasada 6,8.
 * ============================================================ */
:root {
    --light-ground: #FBFAF9;
    --light-surface: #FFFFFF;
    --light-surface-alt: #F4F1EE;
    --light-rule: #E3DFDA;
    --light-rule-strong: #CFC8C1;
    --light-ink: #1B1A18;
    --light-body: #2E2A26;
    --light-muted: #6E6862;

    --light-brand: #AB5235;
    --light-brand-rgb: 171, 82, 53;
    --light-brand-deep: #944429;
    --light-brand-tint: #FCE5DD;
    --light-brand-glow: rgba(171, 82, 53, 0.16);
    --light-brand-contrast: #FFFFFF;
    --light-brand-contrast-rgb: 255, 255, 255;

    --light-open: #3A5A78;
    --light-done: #2E6B4F;
    --light-late: #A62639;
    --light-open-rgb: 58, 90, 120;
    --light-done-rgb: 46, 107, 79;
    --light-late-rgb: 166, 38, 57;
    --light-open-deep: #2F4A63;
    --light-done-deep: #245741;
    --light-late-deep: #8C1F2F;

    /* Escala categórica escurecida para fundo claro */
    --light-cat-5: #7A5C0F;
    --light-cat-6: #6E5288;
    --light-cat-7: #1F7A7A;

    /* Sombra: no escuro é vazamento de luz, no claro é sombra
       de verdade. Um token, dois comportamentos. */
    --shadow-suave: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-media: 0 8px 24px -16px rgba(0, 0, 0, .7);
    --shadow-forte: 0 16px 48px -12px rgba(0, 0, 0, .8);
}

/* O bloco de declarações do tema claro, aplicado nos três casos. */
html[data-theme="light"],
html[data-theme="light"] body {
    --ground: var(--light-ground);
    --surface: var(--light-surface);
    --surface-alt: var(--light-surface-alt);
    --rule: var(--light-rule);
    --rule-strong: var(--light-rule-strong);
    --ink: var(--light-ink);
    --body: var(--light-body);
    --muted: var(--light-muted);

    --brand: var(--light-brand);
    --brand-rgb: var(--light-brand-rgb);
    --brand-deep: var(--light-brand-deep);
    --brand-tint: var(--light-brand-tint);
    --brand-glow: var(--light-brand-glow);
    --brand-contrast: var(--light-brand-contrast);
    --brand-contrast-rgb: var(--light-brand-contrast-rgb);
    --on-brand-bloom: rgba(255, 255, 255, 0.08);
    --on-brand-rule: rgba(255, 255, 255, 0.30);

    --state-open: var(--light-open);
    --state-doing: var(--brand);
    --state-done: var(--light-done);
    --state-late: var(--light-late);
    --state-open-rgb: var(--light-open-rgb);
    --state-done-rgb: var(--light-done-rgb);
    --state-late-rgb: var(--light-late-rgb);
    --state-open-deep: var(--light-open-deep);
    --state-done-deep: var(--light-done-deep);
    --state-late-deep: var(--light-late-deep);

    --cat-1: var(--light-brand);
    --cat-2: var(--light-open);
    --cat-3: var(--light-done);
    --cat-4: var(--light-late);
    --cat-5: var(--light-cat-5);
    --cat-6: var(--light-cat-6);
    --cat-7: var(--light-cat-7);

    /* No claro a sombra é mais fraca e mais curta: papel sobre mesa,
       não objeto flutuando. */
    --shadow-suave: 0 1px 2px rgba(27, 26, 24, .06);
    --shadow-media: 0 8px 24px -16px rgba(27, 26, 24, .28);
    --shadow-forte: 0 16px 40px -14px rgba(27, 26, 24, .22);

    /* ---- Compatibilidade (mantidos até os inline styles saírem) ---- */
    --bg-primary: var(--ground);
    --bg-secondary: var(--surface);
    --text-primary: var(--body);
    --text-secondary: var(--muted);
    --border-glass: var(--rule);
    --bg-glass: var(--surface);
    --bg-glass-hover: var(--surface-alt);
    --accent-purple: var(--brand);
    --accent-purple-glow: var(--brand-glow);
    --accent-emerald: var(--state-done);
    --accent-emerald-glow: rgba(46, 107, 79, 0.16);
    --accent-crimson: var(--state-late);
}

/* Sem escolha registrada: vale o sistema operacional. O
   :not([data-theme]) garante que uma escolha explícita por escuro
   não seja atropelada pela preferência do sistema. */
@media (prefers-color-scheme: light) {
    html:not([data-theme]) {
        --ground: var(--light-ground);
        --surface: var(--light-surface);
        --surface-alt: var(--light-surface-alt);
        --rule: var(--light-rule);
        --rule-strong: var(--light-rule-strong);
        --ink: var(--light-ink);
        --body: var(--light-body);
        --muted: var(--light-muted);

        --brand: var(--light-brand);
        --brand-rgb: var(--light-brand-rgb);
        --brand-deep: var(--light-brand-deep);
        --brand-tint: var(--light-brand-tint);
        --brand-glow: var(--light-brand-glow);
        --brand-contrast: var(--light-brand-contrast);
        --brand-contrast-rgb: var(--light-brand-contrast-rgb);
        --on-brand-bloom: rgba(255, 255, 255, 0.08);
        --on-brand-rule: rgba(255, 255, 255, 0.30);
    --brand-contrast-rgb: var(--light-brand-contrast-rgb);
    --on-brand-bloom: rgba(255, 255, 255, 0.08);
    --on-brand-rule: rgba(255, 255, 255, 0.30);

        --state-open: var(--light-open);
        --state-doing: var(--brand);
        --state-done: var(--light-done);
        --state-late: var(--light-late);
        --state-open-rgb: var(--light-open-rgb);
        --state-done-rgb: var(--light-done-rgb);
        --state-late-rgb: var(--light-late-rgb);
        --state-open-deep: var(--light-open-deep);
        --state-done-deep: var(--light-done-deep);
        --state-late-deep: var(--light-late-deep);

        --cat-1: var(--light-brand);
        --cat-2: var(--light-open);
        --cat-3: var(--light-done);
        --cat-4: var(--light-late);
        --cat-5: var(--light-cat-5);
        --cat-6: var(--light-cat-6);
        --cat-7: var(--light-cat-7);

        --shadow-suave: 0 1px 2px rgba(27, 26, 24, .06);
        --shadow-media: 0 8px 24px -16px rgba(27, 26, 24, .28);
        --shadow-forte: 0 16px 40px -14px rgba(27, 26, 24, .22);

        --bg-primary: var(--ground);
        --bg-secondary: var(--surface);
        --text-primary: var(--body);
        --text-secondary: var(--muted);
        --border-glass: var(--rule);
        --bg-glass: var(--surface);
        --bg-glass-hover: var(--surface-alt);
        --accent-purple: var(--brand);
        --accent-purple-glow: var(--brand-glow);
        --accent-emerald: var(--state-done);
        --accent-emerald-glow: rgba(46, 107, 79, 0.16);
        --accent-crimson: var(--state-late);
    }
}

/* ============================================================
   PAPEL
   Papel é sempre branco, e impressora perde saturação: a tinta
   precisa ser mais escura que a da tela. Os valores ficam em
   --paper-* para existirem uma vez só, e são aplicados em dois
   lugares — na impressão de qualquer página, e na tela das folhas
   de QR Code, que são simulação de papel e não devem seguir o
   tema escuro.

   Antes da Fase 2 cada relatório redefinia isso por conta própria,
   com neutros diferentes.
   ============================================================ */
:root {
    --paper-ground: #FFFFFF;
    --paper-surface: #FFFFFF;
    --paper-surface-alt: #F4F1EE;
    --paper-rule: #CFC8C1;
    --paper-rule-strong: #A9A29B;
    --paper-ink: #000000;
    --paper-body: #1B1A18;
    --paper-muted: #4A443E;

    --paper-brand: #9E3B15;
    --paper-brand-rgb: 158, 59, 21;
    --paper-brand-deep: #7E2F10;
    --paper-brand-tint: #F7E4DA;

    --paper-open: #2F4A63;
    --paper-done: #245741;
    --paper-late: #8C1F2F;
    --paper-open-rgb: 47, 74, 99;
    --paper-done-rgb: 36, 87, 65;
    --paper-late-rgb: 140, 31, 47;

    --paper-cat-5: #63490B;
    --paper-cat-6: #5A4270;
    --paper-cat-7: #186262;
}

/* .tema-papel — para quem simula papel na tela (folha de QR Code) */
.tema-papel,
body.tema-papel {
    --ground: var(--paper-ground);
    --surface: var(--paper-surface);
    --surface-alt: var(--paper-surface-alt);
    --rule: var(--paper-rule);
    --rule-strong: var(--paper-rule-strong);
    --ink: var(--paper-ink);
    --body: var(--paper-body);
    --muted: var(--paper-muted);

    --brand: var(--paper-brand);
    --brand-rgb: var(--paper-brand-rgb);
    --brand-deep: var(--paper-brand-deep);
    --brand-tint: var(--paper-brand-tint);
    --brand-glow: transparent;
    --brand-contrast: var(--paper-ground);
    --brand-contrast-rgb: 255, 255, 255;
    --on-brand-bloom: rgba(255, 255, 255, 0.08);
    --on-brand-rule: rgba(255, 255, 255, 0.30);

    --state-open: var(--paper-open);
    --state-done: var(--paper-done);
    --state-late: var(--paper-late);
    --state-open-rgb: var(--paper-open-rgb);
    --state-done-rgb: var(--paper-done-rgb);
    --state-late-rgb: var(--paper-late-rgb);
    --state-open-deep: var(--paper-open);
    --state-done-deep: var(--paper-done);
    --state-late-deep: var(--paper-late);

    --cat-1: var(--paper-brand);
    --cat-2: var(--paper-open);
    --cat-3: var(--paper-done);
    --cat-4: var(--paper-late);
    --cat-5: var(--paper-cat-5);
    --cat-6: var(--paper-cat-6);
    --cat-7: var(--paper-cat-7);

    /* Os apelidos antigos precisam ser reescritos aqui: eles já
       foram resolvidos no :root e não acompanham só a troca acima. */
    --bg-primary: var(--ground);
    --bg-secondary: var(--surface);
    --text-primary: var(--body);
    --text-secondary: var(--muted);
    --border-glass: var(--rule);
    --bg-glass: var(--surface);
    --bg-glass-hover: var(--surface-alt);
    --accent-purple: var(--brand);
    --accent-purple-glow: transparent;
    --accent-emerald: var(--state-done);
    --accent-crimson: var(--state-late);
}

@media print {
    :root,
    body,
    body.painel-body {
        --ground: var(--paper-ground);
        --surface: var(--paper-surface);
        --surface-alt: var(--paper-surface-alt);
        --rule: var(--paper-rule);
        --rule-strong: var(--paper-rule-strong);
        --ink: var(--paper-ink);
        --body: var(--paper-body);
        --muted: var(--paper-muted);

        --brand: var(--paper-brand);
        --brand-rgb: var(--paper-brand-rgb);
        --brand-deep: var(--paper-brand-deep);
        --brand-tint: var(--paper-brand-tint);
        --brand-glow: transparent;
        --brand-contrast: var(--paper-ground);
        --brand-contrast-rgb: 255, 255, 255;
        --on-brand-bloom: rgba(255, 255, 255, 0.08);
        --on-brand-rule: rgba(255, 255, 255, 0.30);
    --brand-contrast-rgb: 255, 255, 255;
    --on-brand-bloom: rgba(255, 255, 255, 0.08);
    --on-brand-rule: rgba(255, 255, 255, 0.30);

        --state-open: var(--paper-open);
        --state-done: var(--paper-done);
        --state-late: var(--paper-late);
        --state-open-rgb: var(--paper-open-rgb);
        --state-done-rgb: var(--paper-done-rgb);
        --state-late-rgb: var(--paper-late-rgb);
        --state-open-deep: var(--paper-open);
        --state-done-deep: var(--paper-done);
        --state-late-deep: var(--paper-late);

        --cat-1: var(--paper-brand);
        --cat-2: var(--paper-open);
        --cat-3: var(--paper-done);
        --cat-4: var(--paper-late);
        --cat-5: var(--paper-cat-5);
        --cat-6: var(--paper-cat-6);
        --cat-7: var(--paper-cat-7);

        --bg-primary: var(--ground);
        --bg-secondary: var(--surface);
        --text-primary: var(--body);
        --text-secondary: var(--muted);
        --border-glass: var(--rule);
        --bg-glass: var(--surface);
        --bg-glass-hover: var(--surface-alt);
        --accent-purple: var(--brand);
        --accent-purple-glow: transparent;
        --accent-emerald: var(--state-done);
        --accent-crimson: var(--state-late);

        background: var(--paper-ground) !important;
        color: var(--paper-body) !important;
    }

    .card,
    [class*="metric-card"],
    .chart-card,
    .card-panel,
    .ranking-card {
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}