/* Tokens da família NexIris: marca, superfícies, status e tema claro/escuro. Os valores seguem o design
   system do NexIris (app/globals.css, tokens --zap-*, --emerald-*): é o único arquivo a mexer para
   acompanhar uma mudança de marca. Os nomes estão em português porque são os que o painel usa. */
@font-face {
  font-family: "Inter";
  src: url("fontes/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --gradiente-marca: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
  --gradiente-floresta: linear-gradient(155deg, #11553f 0%, #0b3d2e 45%, #082c21 100%);

  --fundo: #e1ebe4;
  --ambiente:
    radial-gradient(1000px 480px at 88% -60px, rgba(16, 185, 129, .12), transparent 62%),
    radial-gradient(820px 420px at -8% 112%, rgba(45, 212, 191, .10), transparent 62%);
  --superficie: #ffffff;
  --superficie-funda: #eef4f0;
  --linha-ativa: #e2ede6;
  --borda: #c6d6cc;
  --borda-forte: #a9bdb0;
  --texto: #0c1712;
  --texto-suave: #3f5249;
  --texto-fraco: #536457;
  --primaria: #059669;
  --primaria-texto: #047857;
  --primaria-clara: rgba(16, 185, 129, .12);
  --primaria-borda: rgba(16, 185, 129, .32);
  --no-primaria: #ffffff;
  --sombra-primaria: 0 4px 14px rgba(5, 150, 105, .25);
  --selo-fundo: #6ee7b7;
  --selo-texto: #065f46;
  --sombra: 0 1px 2px rgba(6, 78, 59, .06), 0 10px 24px -8px rgba(6, 78, 59, .16);
  --sombra-flutuante: 0 20px 50px rgba(2, 6, 23, .22);
  --anel: rgba(16, 185, 129, .45);

  --ok: #047857;
  --ok-fundo: rgba(16, 185, 129, .12);
  --alerta: #92510a;
  --alerta-fundo: rgba(245, 158, 11, .14);
  --erro: #dc2626;
  --erro-fundo: rgba(239, 68, 68, .10);
  --info: #0369a1;
  --info-fundo: rgba(14, 165, 233, .12);

  --p-disponivel: #10b981;
  --p-ocupado: #ef4444;
  --p-tocando: #0ea5e9;
  --p-ausente: #f59e0b;
  --p-offline: #94a3b8;

  --lateral: linear-gradient(168deg, #0e4a37 0%, #0b3d2e 52%, #082c21 100%);
  --lateral-brilho: rgba(52, 211, 153, .25);
  --lateral-linha: rgba(255, 255, 255, .10);
  --lateral-rodape: rgba(0, 0, 0, .15);
  --lateral-texto: rgba(209, 250, 229, .78);
  --lateral-fraco: rgba(209, 250, 229, .55);
  --lateral-icone: rgba(209, 250, 229, .55);
  --lateral-forte: #ffffff;
  --lateral-hover: rgba(255, 255, 255, .08);
  --lateral-ativo: rgba(52, 211, 153, .15);
  --lateral-ativo-borda: rgba(110, 231, 183, .25);
  --lateral-ativo-texto: #a7f3d0;
  --lateral-ativo-icone: #6ee7b7;
  --lateral-largura: 256px;

  --raio-pequeno: 8px;
  --raio: 10px;
  --raio-grande: 13px;
  --raio-cheio: 9999px;
  --suave: cubic-bezier(.4, 0, .2, 1);
  --macio: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

.dark {
  --fundo: #090f0d;
  --ambiente:
    radial-gradient(900px 460px at 88% -80px, rgba(16, 185, 129, .08), transparent 60%),
    radial-gradient(720px 400px at -6% 28%, rgba(34, 211, 238, .05), transparent 60%),
    radial-gradient(820px 440px at 75% 115%, rgba(139, 92, 246, .06), transparent 62%);
  --superficie: #0c1311;
  --superficie-funda: #0a100e;
  --linha-ativa: rgba(255, 255, 255, .07);
  --borda: rgba(255, 255, 255, .09);
  --borda-forte: rgba(255, 255, 255, .18);
  --texto: #e9f2ee;
  --texto-suave: #8aa39a;
  --texto-fraco: #6d857c;
  --primaria: #10b981;
  --primaria-texto: #34d399;
  --primaria-clara: rgba(16, 185, 129, .14);
  --primaria-borda: rgba(16, 185, 129, .30);
  --no-primaria: #04140f;
  --sombra-primaria: 0 4px 14px rgba(16, 185, 129, .25);
  --selo-fundo: rgba(16, 185, 129, .16);
  --selo-texto: #8df0d2;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-flutuante: 0 30px 70px rgba(2, 6, 23, .6);
  --anel: rgba(16, 185, 129, .7);

  --ok: #34d399;
  --ok-fundo: rgba(16, 185, 129, .12);
  --alerta: #fbbf24;
  --alerta-fundo: rgba(251, 191, 36, .10);
  --erro: #f87171;
  --erro-fundo: rgba(248, 113, 113, .10);
  --info: #38bdf8;
  --info-fundo: rgba(56, 189, 248, .10);

  --p-tocando: #38bdf8;
  --p-offline: #64748b;

  --lateral: #020617;
  --lateral-brilho: rgba(16, 185, 129, .10);
  --lateral-linha: rgba(255, 255, 255, .05);
  --lateral-rodape: rgba(15, 23, 42, .20);
  --lateral-texto: #94a3b8;
  --lateral-fraco: #718096;
  --lateral-icone: #718096;
  --lateral-forte: #e2e8f0;
  --lateral-hover: rgba(255, 255, 255, .05);
  --lateral-ativo: rgba(16, 185, 129, .14);
  --lateral-ativo-borda: rgba(52, 211, 153, .30);
  --lateral-ativo-texto: #34d399;
  --lateral-ativo-icone: #34d399;
  color-scheme: dark;
}

/* Séries dos gráficos: cores validadas para daltonismo, com legenda e tabela como reforço. */
:root { --serie-1: #059669; --serie-2: #d97706; --serie-3: #2563eb; }
.dark { --serie-1: #0d9f76; --serie-2: #d97706; --serie-3: #3b82f6; }