/* Zeus: tokens da marca. Cole no topo do CSS do projeto. */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@900&family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600&display=swap');

:root {
  /* cores */
  --zeus-trevas: #141414;
  --zeus-marmore: #F1ECE1;
  --zeus-olho: #E3312B;
  --zeus-olho-escuro: #B8231E;
  --zeus-papel: #FBF8F2;
  --zeus-cinza: #3A3A3A;
  --zeus-cinza-texto: #9A958C;

  /* papéis (modo escuro é o padrão da marca) */
  --zeus-fundo: var(--zeus-trevas);
  --zeus-superficie: #1E1E1E;
  --zeus-texto: var(--zeus-marmore);
  --zeus-texto-2: var(--zeus-cinza-texto);
  --zeus-borda: var(--zeus-cinza);
  --zeus-destaque: var(--zeus-olho);

  /* fontes */
  --zeus-fonte-titulo: 'Big Shoulders Display', 'Impact', sans-serif;
  --zeus-fonte-rotulo: 'JetBrains Mono', ui-monospace, monospace;
  --zeus-fonte-texto: 'Inter', system-ui, sans-serif;

  /* tamanhos */
  --zeus-display: 160px;
  --zeus-h1: 96px;
  --zeus-h2: 64px;
  --zeus-h3: 40px;
  --zeus-h4: 28px;
  --zeus-texto-tam: 17px;
  --zeus-pequeno: 14px;
  --zeus-rotulo-tam: 12px;

  /* forma */
  --zeus-raio: 0;
  --zeus-borda-fina: 1px;
  --zeus-borda-padrao: 2px;
  --zeus-brilho: 0 0 24px rgba(227, 49, 43, 0.55);

  /* movimento */
  --zeus-rapido: 120ms;
  --zeus-padrao: 240ms;
  --zeus-pesado: 600ms;
  --zeus-curva: cubic-bezier(0.2, 0, 0, 1);
}

/* versão clara, só para papelaria e documentos */
.zeus-claro {
  --zeus-fundo: var(--zeus-papel);
  --zeus-superficie: #F1ECE1;
  --zeus-texto: var(--zeus-trevas);
  --zeus-texto-2: #4A4740;
  --zeus-borda: var(--zeus-trevas);
}

body {
  background: var(--zeus-fundo);
  color: var(--zeus-texto);
  font-family: var(--zeus-fonte-texto);
  font-size: var(--zeus-texto-tam);
  line-height: 1.55;
}

.zeus-titulo {
  font-family: var(--zeus-fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.9;
}

.zeus-rotulo {
  font-family: var(--zeus-fonte-rotulo);
  font-weight: 700;
  font-size: var(--zeus-rotulo-tam);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.zeus-botao {
  font-family: var(--zeus-fonte-rotulo);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--zeus-marmore);
  color: var(--zeus-trevas);
  border: 0;
  border-radius: var(--zeus-raio);
  padding: 14px 24px;
  min-height: 48px;
  cursor: pointer;
  transition: box-shadow var(--zeus-padrao) var(--zeus-curva);
}
.zeus-botao:hover { box-shadow: var(--zeus-brilho); }
.zeus-botao:focus-visible { outline: 2px solid var(--zeus-olho); outline-offset: 3px; }

.zeus-botao-secundario {
  font-family: var(--zeus-fonte-rotulo);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: transparent;
  color: var(--zeus-texto);
  border: var(--zeus-borda-padrao) solid var(--zeus-texto);
  border-radius: var(--zeus-raio);
  padding: 12px 22px;
  min-height: 48px;
}

.zeus-tag-ia {
  font-family: var(--zeus-fonte-rotulo);
  font-weight: 700;
  background: var(--zeus-olho);
  color: var(--zeus-trevas);
  padding: 2px 8px;
}