/* =====================================================================
   tokens.css  —  MOTOR DE TEMA (white-label) do SkyVolk
   ---------------------------------------------------------------------
   ESTE É O ÚNICO LUGAR ONDE COR É DEFINIDA.
   Trocar de marca = mudar --brand-1 / --brand-2 / --accent aqui
   (ou sobrescrever em runtime via /api/marca — Fase 3).
   Todo o resto (tons, bordas, gradiente) DERIVA por color-mix,
   então recolore sozinho quando a marca muda.

   Incluído nos 3 HTML: index.html, painel.html, admin/index.html.
   ===================================================================== */
:root{
  /* ========= MARCA — IMPACTOS LURK (as 3 cores que vêm da logo) ========= */
  --brand-1:#E4141B;   /* principal  (vermelho vivo Impactos Lurk)    */
  --brand-2:#9A0F14;   /* secundária (vermelho profundo p/ gradiente) */
  --accent :#22C55E;   /* destaque / OK (verde funcional: online/ok)  */

  /* ========= Base / superfícies (preto Impactos) ========= */
  --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 (vermelho)          */
  --border-2:color-mix(in srgb, var(--brand-1) 40%, transparent);/* borda (vermelho 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 (vermelho) — deriva de --brand-1 ========= */
  --brand-1-glow:color-mix(in srgb, var(--brand-1) 86%, #fff);   /* ~#ff3b30 */
  --brand-1-dark:color-mix(in srgb, var(--brand-1) 52%, #000);   /* ~#8b0000 */
  --brand-1-100 :color-mix(in srgb, var(--brand-1) 52%, #fff);   /* ~#ff8a8a (vermelho claro/coral) */
  --brand-1-200 :color-mix(in srgb, var(--brand-1) 32%, #fff);   /* ~#ffb3b3 (bem claro) */

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

  /* ========= Ramp do ACCENT (verde) — 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) ========= */
  --warn    :#FFA726;
  --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);
}