/* =====================================================================
   tokens.css  —  MOTOR DE TEMA (white-label) — MARCA: BRCOM
   ---------------------------------------------------------------------
   ESTE É O ÚNICO LUGAR ONDE COR É DEFINIDA.
   >>> PARA CRIAR UMA MARCA: troque APENAS --brand-1 / --brand-2 / --accent
       abaixo. Todo o resto (tons, bordas, gradiente, botões) DERIVA por
       color-mix e recolore sozinho. Não edite cor em nenhum outro lugar.

   Exemplos de marca:
     BRCOM:    --brand-1:#34A82F; --brand-2:#1E52C0;
     azul:     --brand-1:#2563EB; --brand-2:#1E3A8A;
     roxo:     --brand-1:#7C3AED; --brand-2:#4C1D95;
   Incluído nos 3 HTML: index.html, painel.html, admin/index.html.
   ===================================================================== */
:root{
  /* ========= MARCA — BRCOM (cores tiradas do emblema) ========= */
  --brand-1:#34A82F;   /* principal  (verde do emblema)                     */
  --brand-2:#1E52C0;   /* secundária (azul da esfera — gradiente)           */
  --accent :#4CC94A;   /* destaque / OK (verde claro — status online/ok)    */
  --amarelo:#FDB927;   /* 3ª cor do emblema (detalhes/realces pontuais)     */

  /* ========= Base / superfícies (preto) ========= */
  --black  :#000000;
  --bg     :#0A0A0A;                                             /* fundo da página (preto puro) */
  --surface:#141416;                                             /* card sólido               */
  --card   :color-mix(in srgb, var(--surface) 62%, transparent); /* card translúcido          */
  --border :color-mix(in srgb, var(--brand-1) 26%, transparent); /* borda (verde)             */
  --border-2:color-mix(in srgb, var(--brand-1) 40%, transparent);/* borda (verde forte)       */

  /* ========= Texto ========= */
  --text       :#ECECEC;                                         /* neutro puro (sem tom)     */
  --text-strong:#FFFFFF;
  --text-2     :#CFCFCF;                                         /* texto levemente esmaecido */
  --text-dim   :#9B9B9B;                                         /* muted (cinza neutro puro) */
  --text-mute  :#636363;                                         /* muted mais escuro         */

  /* ========= Ramp da MARCA-1 (verde) — deriva de --brand-1 ========= */
  --brand-1-glow:color-mix(in srgb, var(--brand-1) 86%, #fff);   /* verde aceso  */
  --brand-1-dark:color-mix(in srgb, var(--brand-1) 52%, #000);   /* verde escuro */
  --brand-1-100 :color-mix(in srgb, var(--brand-1) 52%, #fff);   /* verde claro  */
  --brand-1-200 :color-mix(in srgb, var(--brand-1) 32%, #fff);   /* verde bem claro */

  /* ========= Ramp da MARCA-2 (azul) — deriva de --brand-1/2 ========= */
  --brand-2-soft:color-mix(in srgb, var(--brand-1) 82%, #fff);   /* verde vibrante (glow/borda) */
  --lilac       :color-mix(in srgb, var(--brand-1) 55%, #fff);   /* verde claro (era lilás) */
  --lilac-100   :color-mix(in srgb, var(--brand-1) 22%, #fff);   /* verde bem claro */
  --pink        :color-mix(in srgb, var(--brand-1) 58%, #fff);   /* verde suave */

  /* ========= Ramp do ACCENT — deriva de --accent ========= */
  --accent-100 :color-mix(in srgb, var(--accent) 55%, #fff);     /* ~#86efac */
  --accent-dark:color-mix(in srgb, var(--accent) 42%, #000);     /* ~#1a7d3a */

  /* ========= Status FIXOS (NÃO seguem a marca) =========
     Exceção: o "warn" usa o amarelo do emblema — continua sendo cor de aviso,
     só que no tom da marca. Erro/info seguem neutros de propósito. */
  --warn    :#FDB927;
  --warn-100:color-mix(in srgb, var(--warn) 62%, #fff);          /* ~#ffd166 */
  --info    :#3B82F6;
  --info-100:color-mix(in srgb, var(--info) 62%, #fff);          /* ~#7fb3ff */

  /* ========= Gradiente da marca ========= */
  --grad:linear-gradient(100deg, var(--brand-1), var(--brand-2));

  /* ========= Aliases LEGADOS =========================================
     Nomes de variável que o CSS/JS atual já usa. Mantidos apontando
     para os tokens acima, então o código existente segue a marca
     sem precisar renomear var por var. */
  --red        :var(--brand-1);
  --red-glow   :var(--brand-1-glow);
  --red-dark   :var(--brand-1-dark);
  --red-light  :var(--brand-1-100);
  --roxo       :var(--brand-2);
  --purple     :var(--brand-2-soft);
  --purple-vibe:var(--brand-2);
  --verde      :var(--accent);
  --ink        :var(--bg);
  --txt        :var(--text);
  --muted      :var(--text-dim);
  --border-red :var(--border-2);
}