/* ============================================================
   tema-80s.css · camada de tema sobre wire.css
   Um só modelo para dois sites:
     <html data-site="brevvi">  papel: claro por padrão, segue o sistema
     <html data-site="sbr">     máquina: escuro por padrão
   <html data-theme="claro|escuro"> força o modo nos dois.
   Cores: as quatro do logo da Silverbullet (ciano, roxo, verde, ouro).
   Sem JavaScript: o tema inteiro é CSS.
   Carregar DEPOIS de wire.css.
   ============================================================ */

/* ── 1. Cores do logo (variante neon para fundo escuro, variante profunda para fundo claro) ── */
:root {
  --ciano: #0e7490;  --roxo: #7c3aed;  --verde: #15803d;  --ouro: #b45309;   /* sobre claro */
}
/* ── 2. Brevvi · claro (papel) ── */
:root, :root[data-site="brevvi"] {
  color-scheme: light;
  --fundo: #ffffff;  --fundo-janela: #f6f6f3;  --ponto: #dcdde6;
  --barra: #1b1a24;  --barra-texto: #f6f6f3;
  --texto: #17151f;  --texto-suave: #4a4856;   --borda: #17151f;
  --destaque: #6d28d9; --destaque-texto: #ffffff;
  --cor: var(--roxo);
}
/* Brevvi · escuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]):not([data-site="sbr"]) {
    color-scheme: dark;
    --ciano: #67e8f9; --roxo: #a855f7; --verde: #34d399; --ouro: #fbbf24;
    --fundo: #12111a; --fundo-janela: #1b1a24; --ponto: #2a2840;
    --barra: #e9e6f2; --barra-texto: #12111a;
    --texto: #ecebf2; --texto-suave: #b4b1c4; --borda: #ecebf2;
    --destaque: #a855f7; --destaque-texto: #12111a;
  }
}
:root[data-site="brevvi"][data-theme="escuro"] {
  color-scheme: dark;
  --ciano: #67e8f9; --roxo: #a855f7; --verde: #34d399; --ouro: #fbbf24;
  --fundo: #12111a; --fundo-janela: #1b1a24; --ponto: #2a2840;
  --barra: #e9e6f2; --barra-texto: #12111a;
  --texto: #ecebf2; --texto-suave: #b4b1c4; --borda: #ecebf2;
  --destaque: #a855f7; --destaque-texto: #12111a;
}
/* ── 3. Silverbullet · escuro (máquina) ── */
:root[data-site="sbr"] {
  color-scheme: dark;
  --ciano: #67e8f9; --roxo: #a855f7; --verde: #34d399; --ouro: #fbbf24;
  --fundo: #07060c; --fundo-janela: #0e0d16; --ponto: #1c1b2c;
  --barra: #67e8f9; --barra-texto: #07060c;
  --texto: #e6f7fb; --texto-suave: #9fb4bd; --borda: #67e8f9;
  --destaque: #67e8f9; --destaque-texto: #07060c;
  --cor: var(--ciano);
}
/* Silverbullet · claro */
:root[data-site="sbr"][data-theme="claro"] {
  color-scheme: light;
  --ciano: #0e7490; --roxo: #7c3aed; --verde: #15803d; --ouro: #b45309;
  --fundo: #dce8eb; --fundo-janela: #f3f8f9; --ponto: #b6cdd3;
  --barra: #0e0d16; --barra-texto: #67e8f9;
  --texto: #0b1a20; --texto-suave: #3f5560; --borda: #0b1a20;
  --destaque: #0e7490; --destaque-texto: #ffffff;
  --cor: var(--ciano);
}

/* ── 4. Tipografia: mono só no "chrome"; corpo em sans legível ── */
:root { --corpo-tamanho: 1.0625rem; --pixel: "Silkscreen", "IBM Plex Mono", monospace; }

/* ── 5. Palco: pontos em meio-tom que somem para baixo ── */
body { background: var(--fundo); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--ponto) 1.1px, transparent 1.4px);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 60%);
          mask-image: linear-gradient(180deg, #000 0, transparent 60%);
}

/* ── 6. Cabeçalho: logo + nome + etiquetas ── */
.marca { display: inline-flex; align-items: center; gap: .65rem; }
.marca-logo { width: 2.5rem; height: 2.5rem; display: block; flex: none; }
.tag { border-width: 2px; }
.tag[aria-current="page"] { background: var(--barra); color: var(--barra-texto); border-color: var(--borda); }
.tag-cta { border-color: var(--destaque); }

/* ── 7. Janela: borda grossa, sombra dura na cor da área, chip de cor na barra ── */
.janela {
  border: 2px solid var(--borda);
  box-shadow: 7px 7px 0 var(--cor);
  margin: 0 7px var(--sp-3) 0;
}
.janela[data-cor="ciano"] { --cor: var(--ciano); }
.janela[data-cor="roxo"]  { --cor: var(--roxo); }
.janela[data-cor="verde"] { --cor: var(--verde); }
.janela[data-cor="ouro"]  { --cor: var(--ouro); }
.janela-barra > span:first-child { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.janela-barra > span:first-child::before {
  content: ""; width: .8rem; height: .8rem; flex: none;
  background: var(--cor); border: 2px solid var(--barra-texto);
}
.janela-barra { border-bottom: 2px solid var(--borda); }

/* ── 8. Botões e cartões: retos, com sombra dura que "afunda" ao clicar ── */
.botao { border-width: 2px; box-shadow: 3px 3px 0 var(--borda); transition: transform .08s, box-shadow .08s; }
.botao:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--borda); }
.botao-primario { border-color: var(--borda); }
.cartao { border-width: 2px; }
.passos li { border-left-color: var(--cor, var(--destaque)); }
.demo { border-width: 2px; background-image: radial-gradient(var(--ponto) 1px, transparent 1.3px); background-size: 5px 5px; }

/* ── 9. Barra de estado no rodapé (referência: sistema antigo) ── */
.estado {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center;
  border: 2px solid var(--borda); background: var(--barra); color: var(--barra-texto);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .5em .9em; margin: var(--sp-3) 7px var(--sp-3) 0;
}
.estado .pixel { font-family: var(--pixel); letter-spacing: .12em; }
.estado i { width: .6rem; height: .6rem; background: var(--verde); display: inline-block; margin-right: .4rem; }

@media (prefers-reduced-motion: reduce) { .botao { transition: none; } }