/* Os tokens do app, com os nomes que ele usa. Esta folha é a única fonte de medida e de cor das
   três páginas: um valor escolhido na hora é exatamente como o app chegou a 46 `dp` distintos em
   468 ocorrências sem token nenhum (ADR-0039), e o site não vai repetir isso.

   Onde uma página web precisa de mais ar que uma tela de telefone, o valor é um **múltiplo
   declarado** — `calc(var(--major) * 2)` —, nunca um número novo. */
:root {
  color-scheme: light dark;

  /* Neutros — cool graphite, valores literais do `Color.kt`. */
  --paper: #FFFFFF;
  --surface: #F7F8FA;
  --line: #E2E5E9;
  --text-secondary: #6B7280;
  --graphite: #3A4048;
  --ink: #1A1D21;
  /* A borda de um controle, que não é a de um cartão. O cartão pode sussurrar porque o conteúdo
     dele o anuncia; um botão não tem nada além da própria borda, e precisa dos 3:1 da WCAG 1.4.11. */
  --field-edge: #7C838D;

  /* A única cor da página, e ela é do Coach (ADR-0019): "the only chromatic element is the Coach…
     colour therefore carries a single meaning throughout: the Coach is involved here". É o violeta
     do arco. Usar em qualquer outro lugar faz a página dizer que o Coach está envolvido onde ele
     não está. */
  --coach: #6D4AFF;

  /* Espaço — a escala fechada, nomeada por papel. */
  --hairline: 1px;
  --tight: 4px;
  --snug: 8px;
  --base: 12px;
  --roomy: 16px;
  --gutter: 20px;
  --section: 24px;
  --major: 32px;

  /* Tipografia — os papéis do app na densidade Home, não uma escada de tamanhos. */
  --hero: 44px;
  --figure: 28px;
  --title: 20px;
  --metric: 17px;
  --body: 15px;
  --caption: 13px;
  --label: 11px;

  /* Formas */
  /* A barra na aresta de entrada de um cartão — `accentBar` no app. */
  --accent-bar: 3px;
  --card-corner: 22px;
  --chip-corner: 10px;
  --photo-corner: 12px;
  --glyph: 26px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1013;
    --surface: #191C20;
    --line: #2A2F36;
    --text-secondary: #8B939E;
    --graphite: #C6CBD2;
    --ink: #E8EBEF;
    --field-edge: #7E8794;
    --coach: #A78BFA;
  }
}
@font-face {
  font-family: "Inter";
  src: url("/assets/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--body);
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 42rem; margin: 0 auto; padding: 0 var(--gutter) calc(var(--major) * 2); }

/* A barra: o nome à esquerda, um destino à direita. */
.bar {
  display: flex; flex-wrap: wrap; gap: var(--base); align-items: center;
  justify-content: space-between;
  padding: var(--section) 0; margin-bottom: var(--major);
  border-bottom: var(--hairline) solid var(--line);
  font-size: var(--caption);
}
.bar a { color: var(--text-secondary); text-decoration: none; }
.bar a:hover, .bar a:focus-visible { color: var(--ink); text-decoration: underline; }
.brand { display: inline-flex; align-items: center; gap: var(--snug); color: var(--ink) !important; }
.brand img { width: var(--glyph); height: var(--glyph); border-radius: 22.5%; display: block; }
.brand span { font-weight: 650; letter-spacing: -0.01em; font-size: var(--metric); }

h1 {
  font-size: var(--figure); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  margin: var(--snug) 0 var(--tight);
}
h2 {
  font-size: var(--title); font-weight: 650; letter-spacing: -0.01em; line-height: 1.3;
  margin: calc(var(--major) + var(--base)) 0 var(--base);
}
h3 {
  font-size: var(--metric); font-weight: 650; margin: var(--major) 0 var(--snug);
  color: var(--graphite);
}
p, li { margin: 0 0 var(--base); }
ul, ol { margin: 0 0 var(--roomy); padding-left: var(--section); }
li::marker { color: var(--text-secondary); }
strong { font-weight: 650; }
hr { border: 0; border-top: var(--hairline) solid var(--line); margin: var(--major) 0; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--tight);
  padding: var(--hairline) var(--tight);
  overflow-wrap: anywhere;
}
/* Sem cor: uma ressalva não é o Coach falando. A barra é grafite, e a régua da esquerda basta. */
blockquote {
  margin: var(--section) 0;
  padding: var(--roomy) var(--roomy) var(--tight);
  background: var(--surface);
  border-left: var(--accent-bar) solid var(--graphite);
  border-radius: 0 var(--card-corner) var(--card-corner) 0;
}
a { color: var(--ink); text-decoration-color: var(--field-edge); text-underline-offset: 2px; }
a:hover, a:focus-visible { text-decoration-color: currentColor; }
footer {
  margin-top: calc(var(--major) * 2); padding-top: var(--section);
  border-top: var(--hairline) solid var(--line);
  color: var(--text-secondary); font-size: var(--caption);
}
footer a { color: var(--text-secondary); }