/* Tokens da identidade visual (layout padrão dos painéis, versão 1).
   Claro e escuro. Elevação em 4 camadas (bg, surface, elev, campo). Signal é o único
   acento e só entra em detalhe funcional: botão primário, item ativo, chip selecionado,
   foco e série de dado.

   Regra do tema: var() resolve no elemento onde a propriedade é declarada. O login é um
   [data-theme="dark"] aninhado dentro do app claro, então todo token derivado (valor com
   var() ou color-mix) também é declarado em um seletor que atinge esse elemento em si.
   O teste tests/tokens-tema.test.mjs guarda isso. */

:root{
  --bg:#FCFCFB; --surface:#E4E4E2; --elev:#EAEAE8; --campo:#FFFFFF;
  --ink:#1D1D1F;
  --inv-bg:#18191B; --inv-ink:#F6F6F4;

  --sinal:#087F8C;          /* ícone, barra, série de dado */
  --sinal-ink:#EEEEEE;      /* texto sobre Signal sólido */
  --sinal-solido:#07727E;   /* fundo de botão e item ativo, fixo nos 2 temas */
  --sinal-txt:#07727E;      /* Signal como texto pequeno (contraste AA sobre elev) */

  --estado-atraso:#E20027;
  --estado-pendente:#9A6600;
  --estado-resolvido:#167E68;

  /* sidebar (Ink no claro, surface no escuro) */
  --sb-bg:#1D1D1F; --sb-line:#333538; --sb-ink:#EEEEEE; --sb-mute:#A8A8AA; --sb-dim:#8A8A8E; --sb-hover:#26282C;

  /* séries de dado por frente: ciano e neutros, ordem fixa por identidade */
  --serie-1:#087F8C; --serie-2:#1D1D1F; --serie-3:#6F7378; --serie-4:#5BB5BF; --serie-5:#A9ADB2; --serie-6:#04464E;

  --r-sm:8px; --r-md:9px; --r-lg:12px; --r-xl:14px; --r-2xl:16px; --r-pill:100px;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --overlay:rgba(29,29,31,.55);
}

/* Base escura. Sem :root também vale para o #loginScreen, que é escuro fixo. */
:root[data-theme="dark"],[data-theme="dark"]{
  --bg:#1D1D1F; --surface:#202225; --elev:#26282C; --campo:#313338;
  --ink:#EEEEEE;
  --inv-bg:#ECEDEE; --inv-ink:#141619;
  --sinal:#0CC0D4; --sinal-txt:#0CC0D4;
  --estado-atraso:#FF6553;
  --estado-pendente:#CC8B00;
  --estado-resolvido:#1EAB8C;
  --sb-bg:#202225; --sb-line:#2E3034; --sb-hover:#2A2C30;
  --serie-1:#0CC0D4; --serie-2:#EEEEEE; --serie-3:#9A9EA3; --serie-4:#0A7F8C; --serie-5:#5C6065; --serie-6:#7FE0EC;
}

/* Derivados do claro. */
:root{
  --mute:color-mix(in srgb,var(--ink) 62%,transparent);
  --mute2:color-mix(in srgb,var(--ink) 50%,transparent);
  --line:color-mix(in srgb,var(--ink) 14%,transparent);
  --line2:color-mix(in srgb,var(--ink) 22%,transparent);
  --fill:color-mix(in srgb,var(--ink) 4%,transparent);
  --fill-on:color-mix(in srgb,var(--ink) 8%,transparent);
  --shadow:0 1px 2px color-mix(in srgb,var(--ink) 10%,transparent),0 8px 24px color-mix(in srgb,var(--ink) 12%,transparent);
  --shadow-lg:0 2px 6px color-mix(in srgb,var(--ink) 12%,transparent),0 20px 48px color-mix(in srgb,var(--ink) 20%,transparent);
}
/* Derivados do escuro (percentuais próprios). */
:root[data-theme="dark"],[data-theme="dark"]{
  --mute:color-mix(in srgb,var(--ink) 56%,transparent);
  --mute2:color-mix(in srgb,var(--ink) 46%,transparent);
  --line:color-mix(in srgb,var(--ink) 16%,transparent);
  --line2:color-mix(in srgb,var(--ink) 26%,transparent);
  --fill:color-mix(in srgb,var(--ink) 5%,transparent);
  --fill-on:color-mix(in srgb,var(--ink) 10%,transparent);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.5);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.6);
}
/* Derivados que não mudam de percentual entre os temas, mas dependem de token que muda. */
:root,[data-theme="dark"]{
  --sinal-fundo:color-mix(in srgb,var(--sinal) 14%,transparent);
  --sinal-borda:color-mix(in srgb,var(--sinal) 40%,transparent);
  --estado-atraso-fundo:color-mix(in srgb,var(--estado-atraso) 20%,transparent);
  --estado-atraso-borda:color-mix(in srgb,var(--estado-atraso) 40%,transparent);
  --estado-pendente-fundo:color-mix(in srgb,var(--estado-pendente) 20%,transparent);
  --estado-pendente-borda:color-mix(in srgb,var(--estado-pendente) 45%,transparent);
  --estado-resolvido-fundo:color-mix(in srgb,var(--estado-resolvido) 20%,transparent);
  --estado-resolvido-borda:color-mix(in srgb,var(--estado-resolvido) 45%,transparent);
}