/* ============================================================================
   TOKENS DO PAINEL DO CLIENTE  —  ESPELHO SERVIVEL DOS TOKENS DO EDITOR
   ----------------------------------------------------------------------------
   FONTE UNICA DE VALOR: resources/editor/editor-tokens.css (dicionario --peb-*,
   dois temas, seletor sol/lua).

   POR QUE ESTE ARQUIVO EXISTE
   O editor in-page e um bundle Vite (React) e o editor-tokens.css entra por
   ali; o Painel do Cliente e admin server-rendered (fora do bundle), entao
   precisa dos tokens como CSS servivel de public/. Para NAO virar "3 temas
   para manter", este arquivo mantem os MESMOS nomes de token e o MESMO atributo
   (`data-peb-theme`) do editor — contrato identico, valores identicos. Inclui
   apenas o SUBCONJUNTO de tokens que o painel consome.

   >>> SINCRONIZADO COM O EDITOR EM 2026-08-01 <<<
   Ate 31/07 este espelho ficava DE PROPOSITO na paleta anterior (azul
   #2f6fed) enquanto o editor ja usava a "fase 4" (ambar/terracota). O
   proprietario pediu a unificacao: "e bom deixar o painel com padrao igual ao
   editor e com padrao claro e escuro".

   O QUE A UNIFICACAO EXIGIU, E POR QUE NAO ERA SO TROCAR COR
   Branco sobre o ambar #e0762a mede 3,09:1 — REPROVA o AA de texto (4,5). O
   editor ja tinha resolvido isso com `--peb-accent-ink`, que MUDA COM O TEMA:
   tinta escura sobre o ambar claro da noite, branco sobre a terracota escura
   do dia. Este espelho passou a trazer esse token, e os 13 lugares do painel
   que punham `--peb-text-invert` sobre chapa de acento foram trocados.

   A REGRA, EM UMA LINHA
   - chapa de ACENTO  -> --peb-accent-ink (texto) / --peb-accent-icon-filter (icone)
   - chapa escura QUE NAO E ACENTO (badge neutro, perigo) -> --peb-text-invert

   GUARDA AUTOMATICA
   `tests/js/client-panel-tokens-contraste.test.js` refaz as contas WCAG sobre
   este arquivo E prova que os valores nao divergiram do editor. Se alguem
   mudar uma cor no editor e esquecer o espelho, o teste quebra dizendo qual
   token divergiu — que era exatamente o modo de falha desta divergencia.

   ESCOLHA DO TEMA: `data-peb-theme="dark|light"` no <html> (escrito por
   client-panel-theme.js, sincrono no <head>, sem flash). O bloco :root sem
   atributo e a rede de seguranca (JS off) e vale escuro, como no editor.
   ========================================================================== */

/* --- Constantes (nao mudam com o tema) ---
   Texto/borda SOBRE chapa ESCURA OU SATURADA QUE NAO E O ACENTO: badge neutro,
   botao de perigo. Branco nos dois temas.
   ATENCAO: para chapa de ACENTO use --peb-accent-ink. */
:root {
  --peb-text-invert: #ffffff;
  --peb-icon-filter-invert: brightness(0) invert(1);
  --peb-glass-blur: none;
}

/* --- Tema ESCURO "N · Grafite quente" (padrao) --- */
:root,
:root[data-peb-theme="dark"] {
  --peb-workspace: #111315;         /* fundo da area */
  --peb-glass-panel: #1f2327;       /* PAINEL (topbar, nav, rodape) */
  --peb-glass-line: #363c42;
  --peb-glass-scrim: rgb(6 7 8 / 0.66);

  --peb-surface: #282d32;           /* CARTAO (degrau ACIMA do painel) */
  --peb-surface-2: #2e343a;         /* cartao:hover */
  --peb-surface-muted: #565e66;     /* chapa de badge neutro */

  --peb-chrome-line: #363c42;

  --peb-text-title: #f2f4f6;
  --peb-text: #c3cad1;              /* corpo */
  --peb-text-muted: #959da5;        /* auxiliar */

  --peb-line: #363c42;
  --peb-line-hover: #576068;

  --peb-accent: #e0762a;            /* chapa de acento */
  --peb-accent-strong: #f0873c;     /* acento:hover */
  --peb-accent-text: #f0a065;       /* acento COMO TEXTO, sobre cartao */
  --peb-accent-soft: #3a2415;       /* fundo tenue de acento */
  --peb-accent-ink: #1a1206;        /* texto/icone SOBRE a chapa de acento */
  --peb-accent-ink-rgb: 26 18 6;
  --peb-accent-icon-filter: brightness(0);

  --peb-success-text: #7bd3a0;
  --peb-success-line: #215436;
  --peb-success-soft: #16321f;
  --peb-danger-text: #fca5a5;
  --peb-danger-border: #6a2f2a;
  --peb-danger-soft: #3a2119;
  /* aviso ("médio"), com os valores do editor (21/10/2026, D2 do B3) */
  --peb-warning-text-2: #f8dd8a;
  --peb-warning-line: #6b5416;
  --peb-warning-soft: #3a2e12;

  --peb-icon-filter: brightness(0) invert(1);
}

/* --- Tema CLARO "Papel quente" --- */
:root[data-peb-theme="light"] {
  --peb-workspace: #e8e5df;
  --peb-glass-panel: #f7f5f1;
  --peb-glass-line: #d7d1c6;
  --peb-glass-scrim: rgb(52 44 30 / 0.42);

  --peb-surface: #eae5dd;
  --peb-surface-2: #e1dbd1;
  --peb-surface-muted: #6a6153;

  --peb-chrome-line: #d7d1c6;

  --peb-text-title: #1a1815;
  --peb-text: #4d483f;
  --peb-text-muted: #666050;

  --peb-line: #d7d1c6;
  --peb-line-hover: #a89e8c;

  --peb-accent: #b8511a;
  --peb-accent-strong: #9d4315;
  --peb-accent-text: #a8471a;
  --peb-accent-soft: #f9ece3;
  --peb-accent-ink: #ffffff;
  --peb-accent-ink-rgb: 255 255 255;
  --peb-accent-icon-filter: brightness(0) invert(1);

  --peb-success-text: #146c43;
  --peb-success-line: #d7f0e0;
  --peb-success-soft: #eaf7ef;
  --peb-danger-text: #a8281a;
  --peb-danger-border: #e8b6ab;
  --peb-danger-soft: #fbe8e2;
  /* aviso ("médio"), com os valores do editor (21/10/2026, D2 do B3) */
  --peb-warning-text-2: #8a6a10;
  --peb-warning-line: #e5c07b;
  --peb-warning-soft: #fbf1dc;

  --peb-icon-filter: brightness(0);
}