/* ===========================================================================
 * BNRZ labs · bnrz-tokens.css — os tokens da casa (guia docs/04-padrao-visual.html, 2026-09-11)
 * Publicado em /comum/bnrz-tokens.css e incluido por TODOS os apps. Escuro e o padrao;
 * o claro existe pelo botao de tema (data-theme="light") ou pela preferencia do sistema.
 * Nenhum app declara paleta propria: usa so estes nomes.
 * =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root, :root[data-theme="dark"] {
  /* superficie */
  --bg:#1a1a1a; --bg-2:#242424; --bg-3:#2e2e2e; --surface:#1f1f1f; --raised:#262626;
  --rule:#3a3a3a; --rule-soft:#2e2e2e;
  /* tinta */
  --ink:#f5f1e8; --ink-soft:#c8c4ba; --ink-mute:#8a8378;
  /* acento (um so) */
  --copper:#FF8C00; --copper-dark:#ffa733; --copper-ink:#ffa733; --copper-tint:rgba(255,140,0,.14);
  /* estado — nunca o laranja */
  --ok:#4fb27a; --warn:#d9b44a; --fail:#d5473f; --info:#5b9de6;
  --pass:#4fb27a;   /* nomes antigos do DC Studio: apontam para os novos */
  --shadow:0 2px 8px rgba(0,0,0,.4); --shadow-md:0 12px 32px -12px rgba(0,0,0,.6);
  /* tipografia: Archivo (eixo de largura) para tudo que se le; IBM Plex Mono para dado */
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --wm:'wdth' 112;    /* wordmark */
  --lab:'wdth' 88;    /* rotulo em caixa alta */
  /* raio: tres papeis */
  --r-chip:4px; --r-btn:8px; --r-win:12px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#fbfaf7; --bg-2:#f3efe7; --bg-3:#e8e2d4; --surface:#ffffff; --raised:#f3efe7;
    --rule:#e2dccf; --rule-soft:#ece7db;
    --ink:#1a1a1a; --ink-soft:#3a3a3a; --ink-mute:#6b6b6b;
    --copper:#FF8C00; --copper-dark:#b85e00; --copper-ink:#b85e00; --copper-tint:rgba(255,140,0,.10);
    --ok:#1f8a4c; --warn:#a87d10; --fail:#b3261e; --info:#2a6fc0; --pass:#1f8a4c;
    --shadow:0 2px 8px rgba(26,26,26,.08); --shadow-md:0 12px 32px -14px rgba(26,26,26,.25);
    color-scheme:light;
  }
}
:root[data-theme="light"] {
  --bg:#fbfaf7; --bg-2:#f3efe7; --bg-3:#e8e2d4; --surface:#ffffff; --raised:#f3efe7;
  --rule:#e2dccf; --rule-soft:#ece7db;
  --ink:#1a1a1a; --ink-soft:#3a3a3a; --ink-mute:#6b6b6b;
  --copper:#FF8C00; --copper-dark:#b85e00; --copper-ink:#b85e00; --copper-tint:rgba(255,140,0,.10);
  --ok:#1f8a4c; --warn:#a87d10; --fail:#b3261e; --info:#2a6fc0; --pass:#1f8a4c;
  --shadow:0 2px 8px rgba(26,26,26,.08); --shadow-md:0 12px 32px -14px rgba(26,26,26,.25);
  color-scheme:light;
}

/* A marca dos produtos: anel a 75% que SE DESENHA do zero ao carregar (mesma regra do imee e
   do deveng). Vale para qualquer <svg> de marca que traga class="arco" pathLength="100". */
.arco{stroke-dasharray:100;stroke-dashoffset:100;animation:bnrzDesenha 1600ms cubic-bezier(.34,.86,.32,1) forwards}
.carregando .arco{animation:bnrzDesenhaLoop 1800ms cubic-bezier(.34,.86,.32,1) infinite}
@keyframes bnrzDesenha{to{stroke-dashoffset:0}}
@keyframes bnrzDesenhaLoop{0%{stroke-dashoffset:100}72%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.arco,.carregando .arco{animation:none;stroke-dashoffset:0}}

/* Wordmark: BNRZ 800 + labs 700 copper, sem espaco, largura 112; rotulo do produto 10px caixa alta largura 88 */
.bnrz-wm{display:flex;align-items:baseline;gap:8px;white-space:nowrap;flex:none;font-family:var(--sans)}
.bnrz-wm .b{font-weight:800;font-size:16px;letter-spacing:0;color:var(--ink);font-variation-settings:var(--wm)}
.bnrz-wm .b i{color:var(--copper);font-style:normal;font-weight:700}
.bnrz-wm .p{font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink-mute);font-variation-settings:var(--lab)}