/*
 * O site do Salve — mesmo Design System "Gravador" do app.
 *
 * Os valores vêm de `packages/theme/src/tokens.ts`. Aqui eles são literais
 * porque a web não compartilha o build do app; se um token mudar lá, muda aqui.
 * A paridade que importa é visual: quem vê o site e depois abre o app precisa
 * reconhecer a mesma coisa.
 */

:root {
  /* superfícies */
  --bg: #f4efe6;
  --face: #ede7da;
  --surface: #ffffff;
  --display-bg: #1a1817;

  /* conteúdo */
  --ink: #1a1817;
  --ink2: #6e675c;
  --display-text: #f4efe6;

  /* linhas */
  --line: #d8d0c2;
  --realce: #e9e2d2;

  /* marca */
  --acao: #e8632c;
  --acao-pressed: #b34314;
  --queda: #b03a2e;
  --ambar: #f2a03d;

  /* grade de 4pt */
  --s: 8px;
  --m: 12px;
  --l: 16px;
  --xl: 24px;
  --xxl: 32px;

  --raio: 14px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* ── Tipografia ───────────────────────────────────────────────────────────
   Três papéis, como no app: Anton para emoção, Archivo para leitura, Space
   Mono (sempre em caixa alta) para a "leitura de máquina". */

.display {
  font-family: Anton, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

h1.display {
  font-size: clamp(40px, 9vw, 72px);
}
h2.display {
  font-size: clamp(24px, 5vw, 34px);
  margin-top: var(--xxl);
}

.meta {
  font-family: 'Space Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
  color: var(--ink2);
}

a {
  color: var(--acao-pressed);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--acao);
}

/* ── Estrutura ─────────────────────────────────────────────────────────── */

.envolucro {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--xl) var(--l) var(--xxl);
}

/* O visor: o painel escuro que no app mostra o cronômetro. */
.visor {
  background: var(--display-bg);
  color: var(--display-text);
  border-radius: var(--raio);
  padding: var(--xl);
  text-align: center;
}

.visor .meta {
  color: var(--ambar);
}

.marca {
  width: min(240px, 60vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.subtitulo {
  text-align: center;
  color: var(--ink2);
  font-size: 18px;
  margin: var(--l) auto var(--xl);
  max-width: 30ch;
}

/* Tecla — a "pressão" do DS: sombra dura, não borrada. */
.tecla {
  display: inline-block;
  background: var(--acao);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px var(--xl);
  border-radius: var(--raio);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--acao-pressed);
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1);
}
.tecla:hover {
  color: #fff;
}
.tecla:active {
  transform: translateY(3px);
  box-shadow: none;
}

.cartao {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  padding: var(--l) var(--xl);
  margin: var(--l) 0;
}

.centro {
  text-align: center;
}

ul {
  padding-left: 1.2em;
}
li {
  margin: var(--s) 0;
}

/* Bloco de aviso — usa o âmbar do "testemunho", nunca vermelho de erro. */
.nota {
  border-left: 3px solid var(--ambar);
  background: var(--realce);
  padding: var(--m) var(--l);
  border-radius: 0 var(--raio) var(--raio) 0;
  margin: var(--l) 0;
}

footer {
  border-top: 1px solid var(--line);
  margin-top: var(--xxl);
  padding-top: var(--l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--l);
  justify-content: space-between;
  align-items: center;
}

/* Documento legal: leitura longa pede medida menor e respiro maior. */
.documento h2 {
  font-family: Archivo, sans-serif;
  font-weight: 900;
  font-size: 20px;
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--xl);
}
.documento p,
.documento li {
  font-size: 15.5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--l) 0;
  font-size: 15px;
}
th,
td {
  text-align: left;
  padding: var(--s) var(--m);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--ink2);
}

/* Tabela larga rola dentro de si, nunca empurra a página. */
.rolagem {
  overflow-x: auto;
}