﻿/* Negrone: paleta do sistema v1.1 (proposta do Tech UI/UX, aprovada pelo dono, confirmada pelo Marketing em 03/10/2026; a v1.0 está guardada em negrone-tokens.v1.0.css)
   Contraste medido (WCAG 2.x): texto >= 4,5:1; elementos gráficos (barras, camadas, ícones) >= 3:1.
   Regras de uso:
   - Vermelho forte (--primary) só no botão principal e no logo. Um botão cheio por tela.
   - Texto, ícone e link vermelhos usam --ptext (no escuro é rosado; o vermelho do botão não passa como texto no fundo escuro).
   - Problema (--danger) NUNCA é preenchido: só texto + tinta suave (--danger-bg) + ícone. Fundo sólido de danger com texto branco não é permitido.
   - Menu: aba ativa em --nav-bg / --nav-fg com sublinhado --nav-ul (laranja).
   - Barras: trilho --track, preenchimento --bar (um tom). Cor de atenção (--danger) só onde exige ação (abaixo da mínima, em falta).
   - Camadas de custo: --layer-1..3 + --layer-other, máximo 4, sempre com legenda e valores.
   - Nunca comunicar estado só por cor: ícone ou texto junto.
*/

:root {
  /* Marca (v1.1: logo e botão usam o MESMO vermelho, #A91F2B; v1.0: #B3202A) */
  --brand-red: #A91F2B;
  --brand-red-dark: #F08A8F;   /* taça do logo sobre fundo escuro (= --ptext escuro) */
  --brand-orange: #E8833A;
  --brand-vermouth: #5B1A22;
  --ink: #1B1214;

  /* Superfícies e texto (claro) */
  --bg: #FBF7F2;
  --surface: #FFFFFF;
  --surface-2: #F3ECE2;
  --border: #E6DCCF;
  --text: #1B1214;
  --text-muted: #6B5A5D;

  /* Ação */
  --primary: #A91F2B;        /* v1.0: #B3202A */
  --primary-hover: #5B1A22;
  --on-primary: #FFFFFF;
  --ptext: #A91F2B;          /* NOVO: texto/ícone/link vermelho */
  --link: #A91F2B;
  --accent: #E8833A;
  --on-accent: #1B1214;
  --focus-ring: #E8833A;

  /* Menu (NOVO) */
  --nav-bg: #F0E1DC;
  --nav-fg: #5B1A22;
  --nav-ul: #E8833A;

  /* Barras e camadas (NOVO) */
  --track: #EADFD2;
  --bar: #8E3B44;
  --layer-1: #5B1A22;
  --layer-2: #8E3B44;
  --layer-3: #B8727A;
  --layer-other: #9C8F90;

  /* Estados */
  --success: #256B42;  --success-bg: #E3F1E8;
  --warning: #7A4F08;  --warning-bg: #FBEBCB;   /* v1.0: #8A5A0B */
  --danger:  #A8341A;  --danger-bg:  #FBE3DC;   /* v1.0: #B3202A / #F9DEDF */
  --info:    #245E9E;  --info-bg:    #E0ECF8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #150D0F;
    --surface: #1E1316;
    --surface-2: #2A1B1F;
    --border: #3A2629;
    --text: #F6EFE6;
    --text-muted: #B9A8A6;

    --primary: #B5262F;        /* v1.0: #C42A35 */
    --primary-hover: #CC3540;
    --on-primary: #FFFFFF;
    --ptext: #F08A8F;
    --link: #F08A8F;           /* v1.0: #FF6B73 */

    --nav-bg: #3A2024;
    --nav-fg: #F6EFE6;
    --nav-ul: #E8833A;

    --track: #2F2023;
    --bar: #C9747B;
    --layer-1: #E8A0A5;
    --layer-2: #C9747B;
    --layer-3: #9A4C55;
    --layer-other: #7B6E70;

    --success: #6CC592;  --success-bg: #17301F;
    --warning: #E8B04F;  --warning-bg: #352711;
    --danger:  #F09A8E;  --danger-bg:  #3A1A1A;  /* v1.0: #FF6B73 / #3D1519 */
    --info:    #86B7EA;  --info-bg:    #14283D;
  }
}

:root[data-theme="dark"] {
  --bg: #150D0F;
  --surface: #1E1316;
  --surface-2: #2A1B1F;
  --border: #3A2629;
  --text: #F6EFE6;
  --text-muted: #B9A8A6;

  --primary: #B5262F;
  --primary-hover: #CC3540;
  --ptext: #F08A8F;
  --link: #F08A8F;

  --nav-bg: #3A2024;
  --nav-fg: #F6EFE6;
  --nav-ul: #E8833A;

  --track: #2F2023;
  --bar: #C9747B;
  --layer-1: #E8A0A5;
  --layer-2: #C9747B;
  --layer-3: #9A4C55;
  --layer-other: #7B6E70;

  --success: #6CC592;  --success-bg: #17301F;
  --warning: #E8B04F;  --warning-bg: #352711;
  --danger:  #F09A8E;  --danger-bg:  #3A1A1A;
  --info:    #86B7EA;  --info-bg:    #14283D;
}

/* Faixas de margem (limites configuráveis por bar). Sempre com número e ícone. */
.margem-baixa { color: var(--danger);  background: var(--danger-bg); }
.margem-media { color: var(--warning); background: var(--warning-bg); }
.margem-alta  { color: var(--success); background: var(--success-bg); }

