/* Tema macOS: "luz acesa" (claro) e "luz apagada" (escuro).
   Sem escolha salva, segue o tema do sistema; o botao ☀️/🌙 grava a escolha (ver js/tema.js).
   As cores da marca sao os verdes do logo da Promo Midias (logo.png). */
:root {
  --fundo: #f5f5f7;
  --fundo-2: #ffffff;
  --cartao: #ffffff;
  --cartao-2: #f2f2f5;
  --borda: #e3e3e8;
  --texto: #1d1d1f;
  --texto-suave: #6e6e73;
  --marca: #00a45d;
  --marca-escura: #00804a;
  --marca-clara: #5ec899;
  --verde: #28a745;
  --amarelo: #b25000;
  --perigo: #ff3b30;
  --azul: #007aff;
  --topo: rgba(255, 255, 255, .72);
  --veu: rgba(245, 245, 247, .6);
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .06);
  --sombra-forte: 0 24px 70px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .05);
  --logo: url('/img/logo-promo-escura.png');
  --radius: 12px;
  --radius-sm: 8px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #161618;
    --fundo-2: #1c1c1e;
    --cartao: #232325;
    --cartao-2: #2c2c2e;
    --borda: #3a3a3c;
    --texto: #f5f5f7;
    --texto-suave: #98989d;
    --marca: #14b67a;
    --marca-escura: #00a45d;
    --marca-clara: #5ec899;
    --verde: #30d158;
    --amarelo: #ffd60a;
    --perigo: #ff453a;
    --azul: #0a84ff;
    --topo: rgba(30, 30, 32, .72);
    --veu: rgba(0, 0, 0, .6);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-forte: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
    --logo: url('/img/logo-promo.png');
    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --fundo: #161618;
  --fundo-2: #1c1c1e;
  --cartao: #232325;
  --cartao-2: #2c2c2e;
  --borda: #3a3a3c;
  --texto: #f5f5f7;
  --texto-suave: #98989d;
  --marca: #14b67a;
  --marca-escura: #00a45d;
  --marca-clara: #5ec899;
  --verde: #30d158;
  --amarelo: #ffd60a;
  --perigo: #ff453a;
  --azul: #0a84ff;
  --topo: rgba(30, 30, 32, .72);
  --veu: rgba(0, 0, 0, .6);
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-forte: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
  --logo: url('/img/logo-promo.png');
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}
img { display: block; }
.escondido { display: none !important; }

/* Logo da Promo: troca sozinha entre a versao escura (luz acesa) e a branca (luz apagada) */
.marca { content: var(--logo); }

/* Botao luz acesa / luz apagada */
.btn-tema {
  font: inherit;
  font-size: 1.05em;
  line-height: 1;
  background: var(--cartao-2);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 99px;
  padding: .45em .8em;
  cursor: pointer;
  white-space: nowrap;
}
.btn-tema:hover { border-color: var(--texto-suave); }