/* =====================================================================
   tokens.css  —  MOTOR DE TEMA — FUT LURK CONECT
   ---------------------------------------------------------------------
   ESTE É O ÚNICO LUGAR ONDE COR É DEFINIDA.
   Todo o resto (tons, bordas, gradiente, botões) DERIVA por color-mix e
   recolore sozinho. Não edite cor em nenhum outro lugar.

   Paleta extraída do logo (neon sobre preto):
     verde-limão #B4EC10 / #79E705   magenta #D51DA4   ciano #1BDDE7
   Incluído nos 3 HTML: index.html, painel.html, admin/index.html.
   ===================================================================== */
:root{
  /* ========= MARCA — FUT LURK CONECT ========= */
  --brand-1:#A8F00E;   /* principal  (verde-limão neon do logo)             */
  --brand-2:#E01D97;   /* secundária (magenta neon — gradiente)             */
  --accent :#1BDDE7;   /* destaque / OK (ciano neon — status online/ok)     */

  /* ========= 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 (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 (verde neon) — deriva de --brand-1 ========= */
  --brand-1-glow:color-mix(in srgb, var(--brand-1) 86%, #fff);   /* verde estourado (glow) */
  --brand-1-dark:color-mix(in srgb, var(--brand-1) 52%, #000);   /* verde profundo */
  --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 (magenta) — deriva de --brand-2 ========= */
  --brand-2-soft:color-mix(in srgb, var(--brand-2) 82%, #fff);   /* magenta vibrante (glow/borda) */
  --lilac       :color-mix(in srgb, var(--brand-2) 62%, #fff);   /* magenta claro */
  --lilac-100   :color-mix(in srgb, var(--brand-2) 26%, #fff);   /* magenta bem claro */
  --pink        :var(--brand-2);                                  /* rosa neon do logo */

  /* ========= Ramp do ACCENT (ciano) — 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);
}