/* Tokens de tema dos artefatos. Unico arquivo com cor literal: componente e pagina usam so var(--...).
   Contrato igual ao do claude.ai: claro no :root, escuro por prefers-color-scheme (se a pessoa nao
   escolheu claro) e de novo por [data-theme="dark"], pro seletor ganhar nos dois sentidos. */
:root {
  --fundo: #f5f6f8;
  --superficie: #ffffff;
  --superficie-2: #edf0f4;
  --texto: #18212b;
  --texto-suave: #586574;
  --borda: #d7dde4;
  --acento: #2453c9;
  --acento-forte: #1a3f9e;
  --acento-suave: #e3eafb;
  --sobre-acento: #ffffff;
  --ok: #1b7548;
  --ok-suave: #e1f3ea;
  --alerta: #9a5c00;
  --alerta-suave: #fbefd9;
  --erro: #bf2f2f;
  --erro-suave: #fbe4e4;
  --serie-1: #2453c9;
  --serie-2: #d0742a;
  --serie-3: #1b8a6b;
  --serie-4: #8a4fc7;
  --serie-5: #c23f6e;
  --sombra: 0 1px 2px rgb(16 24 40 / .06), 0 4px 12px rgb(16 24 40 / .06);
  --veu: rgb(16 24 40 / .45);

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: clamp(.72rem, .7rem + .1vw, .78rem);
  --fs-s: clamp(.82rem, .8rem + .12vw, .9rem);
  --fs-m: clamp(.94rem, .9rem + .2vw, 1.02rem);
  --fs-l: clamp(1.1rem, 1rem + .45vw, 1.3rem);
  --fs-xl: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  --fs-xxl: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  --e-1: clamp(.25rem, .22rem + .1vw, .3rem);
  --e-2: clamp(.45rem, .4rem + .2vw, .6rem);
  --e-3: clamp(.7rem, .6rem + .35vw, .95rem);
  --e-4: clamp(1rem, .85rem + .6vw, 1.4rem);
  --e-5: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  --e-6: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
  --raio: 10px;
  --raio-s: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0e1216;
    --superficie: #161b21;
    --superficie-2: #1e252d;
    --texto: #e4e9ee;
    --texto-suave: #98a5b3;
    --borda: #2b343e;
    --acento: #7ea3ff;
    --acento-forte: #a9c1ff;
    --acento-suave: #1c2a4d;
    --sobre-acento: #0a1022;
    --ok: #4cc08a;
    --ok-suave: #12301f;
    --alerta: #e2a43c;
    --alerta-suave: #34260c;
    --erro: #ff7e7e;
    --erro-suave: #3a1616;
    --serie-1: #7ea3ff;
    --serie-2: #f0a05e;
    --serie-3: #4fc7a3;
    --serie-4: #bb8cf0;
    --serie-5: #f07ea6;
    --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .35);
    --veu: rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0e1216;
  --superficie: #161b21;
  --superficie-2: #1e252d;
  --texto: #e4e9ee;
  --texto-suave: #98a5b3;
  --borda: #2b343e;
  --acento: #7ea3ff;
  --acento-forte: #a9c1ff;
  --acento-suave: #1c2a4d;
  --sobre-acento: #0a1022;
  --ok: #4cc08a;
  --ok-suave: #12301f;
  --alerta: #e2a43c;
  --alerta-suave: #34260c;
  --erro: #ff7e7e;
  --erro-suave: #3a1616;
  --serie-1: #7ea3ff;
  --serie-2: #f0a05e;
  --serie-3: #4fc7a3;
  --serie-4: #bb8cf0;
  --serie-5: #f07ea6;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .35);
  --veu: rgb(0 0 0 / .6);
  color-scheme: dark;
}
body { background: var(--fundo); color: var(--texto); font-family: var(--fonte); }

/* seletor de tema que o runtime injeta (opt-out: <meta name="artefato-seletor" content="nao">) */
.artefato-tema {
  position: fixed; right: var(--e-3); bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000; font: 500 var(--fs-xs)/1 var(--fonte);
  background: var(--superficie); color: var(--texto-suave); border: 1px solid var(--borda);
  border-radius: 999px; padding: var(--e-2) var(--e-3); box-shadow: var(--sombra); cursor: pointer;
}
.artefato-tema:hover { color: var(--texto); border-color: var(--acento); }
.artefato-tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }