/* ============================================================
   VR7 — Design System · TOKENS DA CASA (§V, emenda v3.8.0)
   ------------------------------------------------------------
   **Um** vocabulário, consumido por **todos** os shells — o público
   (`public/landing.html`) e o autenticado (`base.html`, `auth/_base_auth.html`).
   Nenhuma folha declara um segundo vocabulário para o mesmo conceito, e
   **nenhuma camada de apelido**: apelido (`--vr7-cor-fundo: var(--cor-fundo)`)
   remove a dor sem remover a divergência, e o próximo nome novo entra sem
   atrito. `tests/test_padrao_tokens_unicos.py` reprova quem tentar.

   Até 2026-08-06 havia DOIS conjuntos disjuntos: `--vr7-*` aqui (35 variáveis,
   só a landing lia) e `--cor-*` no `vr7.css` (36, só a área autenticada lia).
   Eram ≥19 pares de conceito duplicado, e o custo não era estético: toda
   correção de contraste precisava ser feita duas vezes, e a segunda é a que se
   esquece. Foi assim que o FAB de incidentes acabou com duas implementações
   concorrentes, uma em cada folha, com cores diferentes (spec 069.1 · FR-111).

   Como cada par foi decidido (FR-112, registro em contracts/mapa-de-tokens.md):
     · IDENTIDADE da marca  → o valor da vitrine SOBE e passa a valer na casa
       inteira: as fontes Archivo/Manrope, o dourado e o bronze.
     · Divergência ACIDENTAL → vence o valor da área autenticada: os dois
       quase-pretos, os verdes de sucesso, raio, escala de espaçamento.

   Fontes self-hosted (OFL) — zero origem externa (CSP · FR-199).
   ============================================================ */

/* ---------- fontes da marca (FR-199 · FR-116) ----------
   Passam a valer na plataforma INTEIRA desde a spec 069.1: até aqui só a
   landing as usava e a área autenticada caía na pilha do sistema — a pendência
   transversal que o `specs/README.md` registrava.

   As variantes `latin-ext` **entram** (FR-116a). Eram 8 dos 16 arquivos no
   disco sem nenhum `@font-face` que as referenciasse: metade do peso era morta,
   e ninguém conseguia responder "esta fonte é usada?" olhando o diretório. Com
   `unicode-range`, o navegador só as baixa quando a página tem o caractere —
   então a acentuação de língua estrangeira passa a ser coberta **sem** custo
   para quem não a usa. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   TOKENS — tema escuro (padrão)
   Contraste WCAG AA garantido (FR-201). Os valores de cor da área autenticada
   venceram os da vitrine por serem divergência ACIDENTAL (dois quase-pretos a
   1% de luminância um do outro, dois bones indistinguíveis); os de tipografia e
   marca vieram da vitrine por serem IDENTIDADE.
   ============================================================ */
:root {
  /* ── Cor: base ─────────────────────────────────────────────────────────── */
  --cor-fundo: #000000; /* fundo base */
  --cor-superficie: #0f0f0d; /* painéis/cartões elevados */
  --cor-superficie-2: #16150f; /* linhas alternadas / hover / faixa alternada */
  /* EXCEÇÃO DECLARADA à unicidade da §V, e ela é verificável (spec 071 ·
     FR-002d). Este token existe SÓ para `vr7-landing.css`: a vitrine ficou
     fora do escopo da 071 por decisão do dono, e apagá-lo deixaria 5
     leituras órfãs lá — órfão em CSS não é erro, é silêncio (em
     `.vr7-pilares` o `color` inválido poria texto escuro sobre fundo
     escuro). O shell autenticado NÃO pode lê-lo: use `--camada-cartao-fundo`.
     Há teste que reprova se o shell voltar a consumi-lo. O valor NÃO muda —
     é renomeação, e é o que mantém as 6 imagens da vitrine idênticas. */
  --cor-superficie-vitrine: #121210;
  --cor-borda: #2a2822; /* divisórias / hairlines */

  /* ── Cor: marca ────────────────────────────────────────────────────────── */
  --cor-marca: #e7e2d2; /* champanhe (bone) — logo/texto sobre preto */
  --cor-marca-forte: #f2efe4; /* realce (foco/hover) */

  /* Bronze e dourado: os valores da VITRINE venceram (identidade da marca,
     FR-112). A diferença para os antigos do shell é imperceptível — `#8A7347`
     contra `#8f7846`, `#C6A265` contra `#c5a572` —, mas o critério não é a
     magnitude: onde o valor É a identidade, quem manda é a superfície pública,
     que é onde a marca se apresenta. */
  --cor-marca-bronze: #8a7347; /* dourado profundo (fim do gradiente metálico) */
  /* Superfície sólida para texto BRANCO. O bronze acima é claro demais no tema
     escuro: dá ~4,25:1 com branco, abaixo dos 4,5:1 da AA. Medido pela régua de
     navegador da 069.0 (T031) — antes dela, o CSS AFIRMAVA contraste AA e
     ninguém tinha como conferir. Este dá 6,5:1 nos dois temas. */
  --cor-marca-bronze-forte: #6f5b34;
  --cor-dourado: #c6a265; /* dourado da marca — acento (bordas, foco, linhas) */
  --cor-dourado-bri: #ddc191; /* dourado claro — realce de acento */
  /* Superfície sólida dourada para o texto ESCURO do botão primário. Aqui
     coincide com `--cor-dourado`; no tema claro NÃO coincide, e é por isso que o
     token existe — ver a nota no bloco do tema claro. */
  --cor-dourado-solido: #c6a265;
  /* Texto sobre superfície dourada/bronze. Vem da vitrine, onde o botão
     primário sempre teve esse par; o shell cravava o valor no componente. */
  --cor-contraste-escuro: #171205;
  --cor-borda-dourada: rgba(198, 162, 101, 0.22); /* contorno de acento */
  /* Dourado seguro para TEXTO PEQUENO — e o par que faltava.
     `--cor-dourado` é **acento** por construção (bordas, foco, linhas), e o
     comentário dele sempre disse "nunca texto pequeno sobre champanhe". Só que
     não havia alternativa nomeada, então a superfície pública o usou como texto
     de 12px mesmo: a régua de navegador mediu **3,60:1** no tema claro, contra
     os 4,5:1 da AA. Aqui o tema escuro mantém o dourado da marca (8,76:1) e o
     claro desce ao bronze (5,52:1) — a identidade fica, a legibilidade também. */
  --cor-dourado-texto: #c6a265;
  /* O mesmo papel, para superfície de polaridade INVERTIDA. A faixa de pilares
     pinta `background: var(--cor-texto)` de propósito — ela é escura no tema
     claro e clara no escuro. Um rótulo dourado ali precisa do dourado do tema
     OPOSTO: medido, `--cor-marca-bronze` dava 2,79:1 no claro e 3,51:1 no
     escuro. Sem este par, "corrigir" o rótulo num tema estragava no outro. */
  --cor-dourado-texto-invertido: #6f5b34;
  /* Gradiente do botão primário. NÃO é o `--grad-chevron`: aquele vai do bronze
     ao bone e, como superfície de texto, a parada mais desfavorável dava
     4,03:1 (claro) e 4,11:1 (escuro) — as duas abaixo da AA. Aqui as DUAS
     paradas são seguras com o texto do tema, então o botão passa em qualquer
     ponto do gradiente, não só no meio. O visual metálico fica. */
  --grad-botao: linear-gradient(120deg, #c6a265, #e7e2d2);

  /* ── Cor: texto e estado ───────────────────────────────────────────────── */
  --cor-texto: #e7e2d2; /* texto principal (bone) — AA (~14:1) */
  --cor-texto-2: #b3ae9e; /* texto secundário (bone-soft) — AA (~7:1) */
  --cor-sucesso: #4fb477;
  /* Verde de TEXTO PEQUENO — outro papel do mesmo conceito, como
     `--cor-erro-solido` é do vermelho (073.1). `--cor-sucesso` existe para
     pintar selo, borda e fundo esmaecido; usado em rótulo de 12px ele dava
     **4,27:1** no tema claro, contra os 4,5:1 exigidos — reprovado pela régua de
     contraste no extrato da Conta VR7, a primeira tela registrada que o
     exercita em texto (075 · T093, 2026-08-15).
     `#266a43` dá **4,95:1** sobre `--cor-superficie` E sobre `--cor-superficie-2`
     (o fundo da linha alternada), com folga para não voltar a reprovar por
     arredondamento. No escuro o verde de sempre já dá 6,5:1 e fica. */
  --cor-sucesso-texto: #4fb477;
  --cor-erro: #cf7d70;
  /* Superfície do botão destrutivo — **não** é o mesmo vermelho do texto de erro
     (spec 073.1, achado da régua de contraste na ficha da carteira, 2026-08-11).
     `--cor-erro` existe para pintar TEXTO sobre o fundo do tema, e no escuro ele
     é claro de propósito (#cf7d70). Usado como FUNDO com texto branco por cima,
     ele dava 3,08:1 — reprovado. São dois papéis diferentes do mesmo conceito, e
     um token só não serve aos dois: clarear para o texto escurece o botão, e
     escurecer para o botão apaga o texto de erro.
     Medido: 6,03:1 contra o branco do rótulo (exigido 4,5) e 3,18:1 contra o
     painel (exigido 3 para limite de componente). */
  --cor-erro-solido: #a8422f;

  /* ── O que fica SOBRE cor sólida e sobre véu (064.4 · achado `003·T031`) ──
     Estes três valores estavam cravados em 12 regras de `vr7.css`, fora de
     qualquer bloco de token.

     ⚠️ **Eles NÃO se invertem com o tema, e é por isso que vivem só aqui.**
     Branco sobre `--cor-erro-solido` é branco nos dois temas — o fundo é o
     mesmo vermelho, e clareá-lo no escuro apagaria o texto. O véu é preto nos
     dois pela mesma razão: ele escurece uma FOTO, não uma superfície da casa.
     Declará-los no bloco escuro os faria "seguir o tema" e quebrar exatamente
     onde precisam ser fixos. */
  --cor-sobre-solido: #fff; /* texto sobre botão/selo de cor sólida */
  --veu-suave: rgba(0, 0, 0, 0.5); /* sobreposição legível sobre miniatura */
  --veu-medio: rgba(0, 0, 0, 0.55); /* faixa de legenda sobre imagem */
  --veu-forte: rgba(0, 0, 0, 0.72); /* fundo do lightbox */

  /* Branco de LEITURA ÓPTICA, não de superfície. O código de barras e o QR
     precisam de fundo claro nos DOIS temas para o leitor funcionar — inverter
     no escuro não é preferência estética, é o código deixar de ser lido.
     Exceção declarada pelo dono; o token existe para que a razão viaje junto
     do valor (064.4 · `003·T031`). */
  --cor-leitura-optica: #ffffff;

  --grad-chevron: linear-gradient(120deg, #8a7347, #e7e2d2);

  /* ── Tipografia: a IDENTIDADE da marca, agora na casa inteira (FR-116) ──
     Archivo (display) e Manrope (corpo) vinham valendo só na vitrine; a área
     autenticada caía na pilha do sistema. É a mudança de aparência mais visível
     desta spec, e ela é INTENCIONAL (FR-112c, faixa 2 aprovada em 2026-08-06). */
  --fonte-display: 'Archivo', system-ui, sans-serif;
  --fonte-corpo: 'Manrope', system-ui, sans-serif;
  --num-tabular: 'tnum' 1, 'lnum' 1; /* números tabulares p/ valores monetários */

  /* ── Escala tipográfica ────────────────────────────────────────────────── */
  --texto-xs: 0.72rem;
  --texto-sm: 0.88rem;
  --texto-base: 1rem;
  --texto-md: 1.1rem;
  --texto-lg: 1.35rem;
  --texto-xl: clamp(1.9rem, 4vw, 2.8rem);
  --texto-hero: clamp(2.6rem, 6vw, 4.6rem);

  /* ── Espaçamento: escala ÚNICA ─────────────────────────────────────────
     A da área autenticada venceu (divergência acidental). Ela é mais fina — 8
     degraus contra 5 — e os nomes das duas COLIDIAM com valores diferentes:
     `--vr7-esp-2` era 1rem e `--esp-2` é 0.5rem. Escala com nome colidente é a
     pior forma de duplicata, porque parece que se está lendo a mesma coisa.

     Os dois degraus do fim (`--esp-12`, `--esp-16`) são NOVOS: a vitrine
     precisava de 2.5rem e 4rem para o ritmo das seções, e a escala do shell
     parava em 2rem. A escala CRESCE — não se bifurca. */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-secao: clamp(4.5rem, 9vw, 6.5rem); /* respiro entre seções da vitrine */

  /* ── Forma e foco ──────────────────────────────────────────────────────── */
  --raio: 6px; /* a vitrine adota (faixa 2 aprovada) — era 14px lá */
  --raio-pill: 999px;
  --foco-anel: 2px solid var(--cor-dourado);
  --alvo-toque: 44px; /* mínimo de toque (FR-201) */

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --largura-conteudo: 72rem; /* max-width do shell e da vitrine (FR-202) */

  /* Altura do cabeçalho. Valor de partida = padding (2×--esp-3) + o filho mais
     alto (--alvo-toque, do seletor de loja); vr7.js afina em runtime com a
     altura real. Serve de âncora ao que flutua sob a barra. A vitrine adota
     (faixa 2 aprovada) — tinha 76px fixo. */
  --altura-cabecalho: calc(var(--alvo-toque) + var(--esp-3) * 2);
  /* Topo do pop-up de feedback (toast). Padrão SEM cabeçalho (layout de auth);
     o shell redefine no `vr7.css`. */
  --toast-topo: var(--esp-4);

  /* ── Navegação responsiva (spec 068) ──────────────────────────────────────
     Dois valores que existem em UM lugar de propósito: cada um é consumido por
     dois caminhos diferentes, e valor duplicado é valor que diverge no primeiro
     ajuste que só um dos lados receber.

     --largura-rail: modo compacto POR PREFERÊNCIA (`.vr7-menu-compacto`,
     FR-006) e rail POR LARGURA (faixa do tablet, 48rem–64rem — FR-013).

     --altura-barra-inferior: `padding-bottom` do `.vr7-main` e deslocamento da
     barra de ações do pedido (spec 065), que no telefone ocuparia a MESMA
     coordenada (research D11 da 068). */
  --largura-rail: 3.75rem;
  --altura-barra-inferior: 3.5rem;

  /* ── Navegação: largura e recuo (spec 069.4 · Fase 2, itens B2 e B3) ──────
     --largura-lateral: a lateral estendida. Era `width: 15rem` escrito na
     regra — número solto que não acompanha nada: num monitor largo a lateral
     ficava estreita para 18 itens com rótulo, e é onde os rótulos encurtam. O
     `clamp` dá piso (o valor de antes, para nada encolher), preferência
     proporcional e teto (acima disso a lateral rouba área de trabalho sem
     ganhar item nenhum).

     --nav-recuo-rotulo: onde o RÓTULO do item começa — depois do padding do
     item, do ícone e do intervalo entre os dois. O título do grupo se alinha
     por aqui (item B2). É conta, e conta escrita uma vez não é remedida a olho
     na próxima tela: `.vr7-icone` mede `1.25em` e o item herda `1rem`. */
  --largura-lateral: clamp(15rem, 18vw, 20rem);
  --nav-recuo-rotulo: calc(var(--esp-3) * 2 + 1.25rem);

  /* ── Superfícies com alfa ────────────────────────────────────────────────
     Existem como token porque cor com transparência é onde o tema claro fica
     para trás: o valor cravado não inverte, e a seção segue "dark-first"
     enquanto o resto da página muda (FR-114). Foi literalmente o caso do
     cabeçalho e do menu do telefone da vitrine, que exigiam QUATRO
     sobreposições de tema claro só para desfazer o estrago — e as quatro
     sumiram quando estes tokens passaram a existir. */
  --cor-cabecalho-fundo: rgba(0, 0, 0, 0.85); /* barra do topo, sob blur */
  --cor-menu-fundo: rgba(0, 0, 0, 0.97); /* menu do telefone, aberto */
  --cor-borda-contorno: rgba(231, 226, 210, 0.28); /* botão de contorno */
  --cor-dourado-tenue: rgba(198, 162, 101, 0.28); /* halo do botão primário */
  --cor-veu-claro: rgba(255, 255, 255, 0.22); /* véu sobre superfície sólida */

  /* ── ESCALA DE SUPERFÍCIE — a profundidade da casa (spec 071) ─────────────
     Lida da tela de pedidos, não escolhida de um catálogo: em ~550 linhas do
     bloco dela há UMA `box-shadow`, e está num popover. Toda a hierarquia do
     que está EM FLUXO é feita de degrau de cor, borda e raio.

     ⚠️ REGRA, e ela precisa estar escrita aqui: **um degrau é distância do que
     está atrás — não direção de luminosidade.**

         escuro   #000000 → #0f0f0d → #16150f      clareia, clareia
         claro    #f0ece1 → #ffffff → #e7e0d0      clareia, ESCURECE

     No tema claro o cartão já é branco: não há para onde clarear, e um destaque
     dentro dele só pode se afastar PARA BAIXO, onde lê-se como reentrância. Os
     dois temas obedecem à mesma regra; só o sentido muda. Sem esta nota, o nome
     sugere "mais claro", o próximo autor lê o tema claro como defeito e o
     "conserta" — por isso os degraus têm nome de PAPEL, nunca de nível.

     A gramática são três regras que andam juntas:
       1. o degrau sobe conforme se aninha;
       2. o raio diminui conforme se desce (o de fora é o dobro do de dentro);
       3. fundo e borda se ALTERNAM — quem ganha cor própria dispensa a borda,
          quem não ganha se delimita por ela.
     A 3 é a menos óbvia e a mais útil: sem ela cada nível soma fundo E borda, e
     a tela vira uma grade de molduras. Por isso as ausências abaixo são
     deliberadas, e há teste que reprova se alguém as preencher. */
  --camada-cartao-fundo: var(--cor-superficie);
  --camada-cartao-borda: 1px solid var(--cor-borda);
  --camada-cartao-raio: calc(var(--raio) * 2);
  /* aninhado: sem fundo próprio — por isso leva borda (regra 3) */
  --camada-aninhado-borda: 1px solid var(--cor-borda);
  --camada-aninhado-raio: calc(var(--raio) * 2);
  /* destaque: ganha cor própria — por isso NÃO leva borda (regra 3) */
  --camada-destaque-fundo: var(--cor-superficie-2);
  --camada-destaque-raio: var(--raio);
  /* separação: só divide itens de uma lista */
  --camada-separacao-borda: 1px solid var(--cor-borda);
  /* cromo: a moldura de trabalho — cabeçalho, lateral e barra inferior. Não é
     "cartão": não repousa sobre o conteúdo, ele é que rola por dentro dela. E
     não é degrau novo por gosto (spec 069.4 · Fase 2, itens A2 e C3): quatro
     regras liam `--cor-superficie` cru para dizer a mesma coisa, e quatro
     leituras do mesmo valor são quatro lugares para divergir — foi assim que
     `aninhado` e `destaque` quase morreram por duplicação antes de ganharem
     nome. O nome não foi inventado aqui: `tests/test_escala_superficie.py` já
     chamava esta família de "cromo".
     Sem raio próprio, e a ausência é deliberada: cromo não flutua e não tem
     canto — ele encosta nas bordas da janela. */
  --camada-cromo-fundo: var(--cor-superficie);

  /* ── ESCALA DE SOMBRA — só para o que FLUTUA sobre o conteúdo ─────────────
     Cada degrau é a sombra COMPLETA (deslocamento + desfoque + cor), não só a
     cor: token de cor com a geometria escrita na regra é exatamente como 7
     formas nasceram para 3 intenções. E cada um tem valor nos DOIS temas —
     sombra preta sobre `#f0ece1` não é sombra, é sujeira. */
  --sombra-suspensa: 0 8px 24px rgba(0, 0, 0, 0.35); /* painel ancorado a um gatilho */
  --sombra-destacada: 0 12px 32px rgba(0, 0, 0, 0.35); /* lista que cobre área maior */
  --sombra-modal: 0 20px 60px rgba(0, 0, 0, 0.35); /* cobre a tela, com véu */
  /* Texto sobre o bronze SÓLIDO. Branco puro de propósito: é o par medido em
     6,5:1 nos dois temas, e não inverte com o tema — a superfície também não. */
  --cor-sobre-bronze: #ffffff;
  /* Texto sobre a superfície DOURADA sólida (botão primário, FAB). Mesmo
     raciocínio do par acima, na outra ponta: escuro nos DOIS temas, porque
     `--cor-dourado-solido` é dourado nos dois. AA medido: 10,80:1 no escuro,
     5,72:1 no claro.

     ⚠️ NÃO confunda com `--cor-contraste-escuro`, que **inverte** com o tema —
     ele serve a superfícies que também invertem. Foi por não existir este
     token que o valor `#14120c` ficou cravado em quatro regras (achado
     `027·T012`), e cada estado novo do botão dependia de alguém copiar o
     hexadecimal certo. O invariante da spec 027 — todo estado que muda o fundo
     re-fixa a cor do texto — só é sustentável se houver o que re-fixar. */
  --cor-sobre-dourado: #14120c;
}

/* ============================================================
   TEMA CLARO (E-001/E-002) — MESMO design system, só a base de cor inverte.
   Mecanismo único no elemento raiz, sem "flash" (é CSS, resolvido no servidor):
     (a) forçado pelo usuário  → :root[data-tema="claro"]
     (b) automático pelo SO    → @media(prefers-color-scheme:light) e o usuário
         NÃO forçou escuro (:root:not([data-tema="escuro"]))
   Escuro forçado (:root[data-tema="escuro"]) cai no :root padrão acima.
   Champanhe/dourado seguem SÓ como acento; texto/links/marca viram quase-preto
   para garantir AA sobre o creme (FR-201).

   **Este bloco agora alcança a vitrine também** (FR-114). Antes ele existia só
   no `vr7.css`, e a vitrine tinha o seu, com cores cravadas fora de variável —
   o que deixava seções "dark-first" que o tema claro não invertia.
   ============================================================ */
:root[data-tema="claro"] {
  --cor-fundo: #f0ece1;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #e7e0d0;
  --cor-superficie-vitrine: #ffffff;
  --cor-borda: #cfc6ae;
  --cor-marca: #1a150a;
  --cor-marca-forte: #000000;
  --cor-marca-bronze: #6f5b34;
  --cor-marca-bronze-forte: #6f5b34; /* superfície sólida p/ texto branco — AA (6,5:1) */
  --cor-dourado: #8f7846;
  --cor-dourado-bri: #a9895a;
  /* Superfície sólida do botão primário. NÃO é `--cor-dourado`: aquele é escuro
     de propósito (para servir de TEXTO e borda sobre o creme), e como FUNDO do
     texto escuro dava 4,41:1 — abaixo dos 4,5:1 da AA. Este dá 5,08:1.
     O defeito atravessou o tema claro inteiro porque só o HOVER tinha sido
     medido; o estado em repouso, ninguém tinha como conferir antes da régua da
     069.0. */
  --cor-dourado-solido: #9b8250;
  --cor-contraste-escuro: #faf9f5; /* texto claro sobre dourado/bronze */
  --cor-borda-dourada: rgba(143, 120, 70, 0.30);
  --cor-dourado-texto: #6f5b34; /* 5,52:1 sobre o creme — ver a nota no escuro */
  --cor-dourado-texto-invertido: #c6a265;
  --grad-botao: linear-gradient(120deg, #6f5b34, #4a3c20);
  --cor-texto: #1a150a;
  --cor-texto-2: #5c5647;
  --cor-sucesso: #2e7d4f;
  --cor-sucesso-texto: #266a43;
  /* AA nos dois temas (§V), e o número é medido, não estimado.
     Era `#b3402f`: sobre `--cor-superficie-2` do tema claro (#e7e0d0, o fundo
     de `.vr7-aviso`) dava **4,33:1** contra os 4,5:1 exigidos — reprovado pela
     régua de contraste na 1ª passagem da 069.2, nas 3 larguras. `#a63a2a` dá
     4,90:1, com folga para não voltar a reprovar por arredondamento.
     O conserto é no TOKEN, não na regra do aviso: o mesmo vermelho pinta erro
     de campo, de formulário e de listagem, e corrigir só onde a régua olhou
     deixaria o defeito de pé em toda tela que ela ainda não visitou. */
  --cor-erro: #a63a2a;
  /* Ver a nota do tema escuro. No claro os dois papéis coincidem — o vermelho do
     texto já é escuro o bastante para servir de fundo (6,44:1 contra o branco) —,
     mas o token existe **nos dois** de propósito: um `var()` que só existisse num
     tema cairia para o valor herdado no outro, em silêncio. */
  --cor-erro-solido: #a63a2a;
  --grad-chevron: linear-gradient(120deg, #8f7846, #6f5b34);
  --cor-cabecalho-fundo: rgba(250, 249, 245, 0.9);
  --cor-menu-fundo: rgba(250, 249, 245, 0.98);
  --cor-borda-contorno: rgba(143, 120, 70, 0.30);
  --cor-dourado-tenue: rgba(143, 120, 70, 0.28);
  --cor-veu-claro: rgba(255, 255, 255, 0.35);
  /* A escala de superfície NÃO se repete aqui de propósito: os degraus apontam
     para `--cor-superficie`/`--cor-superficie-2`/`--raio`, que este bloco já
     redefine — `var()` resolve no ponto de USO, então o degrau acompanha o tema
     sozinho. A de sombra precisa repetir-se, porque a cor dela é literal. */
  --sombra-suspensa: 0 8px 24px rgba(26, 21, 10, 0.18);
  --sombra-destacada: 0 12px 32px rgba(26, 21, 10, 0.20);
  --sombra-modal: 0 20px 60px rgba(26, 21, 10, 0.24);
}

/* ============================================================
   IMPRESSÃO (064.4 · `004·T029`) — o papel é outro meio, não um terceiro tema.

   O tema **escuro é o `:root` padrão**, então quem estivesse nele mandava para
   a impressora texto cor de osso (`#e7e2d2`). O navegador não imprime fundo por
   padrão — imprime **texto** —, e o resultado era uma folha praticamente em
   branco: extrato e relatório saíam ilegíveis, e nada acusava, porque a tela
   estava perfeita.

   ⚠️ **Isto NÃO é uma terceira cópia da paleta clara**, e a distinção é
   deliberada. Copiar os ~60 tokens do bloco claro para cá seria repor o defeito
   que esta spec inteira ataca: três lugares guardando a mesma verdade, e o dia
   em que dois divergirem ninguém saberá qual está certo.

   O que o papel precisa é menos do que uma tela precisa: **tinta escura sobre
   branco, divisórias visíveis, nenhum fundo chapado**. Acento dourado, camadas
   e sombras não sobrevivem à impressão de qualquer forma — e gastar toner com
   eles seria pior do que não os ter. Por isso a lista é curta e as regras são
   sobre o meio, não sobre o tema.

   `color-scheme: light` acompanha para que controles nativos (caixas, seletores)
   também sejam desenhados na variante clara.
   ============================================================ */
@media print {
  :root,
  :root[data-tema="escuro"],
  :root[data-tema="claro"] {
    color-scheme: light;

    --cor-fundo: #ffffff;
    --cor-superficie: #ffffff;
    --cor-superficie-2: #ffffff;
    --cor-superficie-vitrine: #ffffff;
    --cor-texto: #000000;
    --cor-texto-2: #333333;
    --cor-borda: #999999;
    --cor-borda-dourada: #999999;
    --cor-borda-contorno: #999999;
    --cor-marca: #000000;
    --cor-marca-forte: #000000;
    --cor-dourado-texto: #000000;

    /* Camadas: no papel, profundidade é a borda — fundo chapado vira mancha de
       toner, e sombra não existe. */
    --camada-cartao-fundo: transparent;
    --camada-destaque-fundo: transparent;
    --camada-cromo-fundo: transparent;
    --sombra-suspensa: none;
    --sombra-destacada: none;
    --sombra-modal: none;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --cor-fundo: #f0ece1;
    --cor-superficie: #ffffff;
    --cor-superficie-2: #e7e0d0;
    --cor-superficie-vitrine: #ffffff;
    --cor-borda: #cfc6ae;
    --cor-marca: #1a150a;
    --cor-marca-forte: #000000;
    --cor-marca-bronze: #6f5b34;
    --cor-marca-bronze-forte: #6f5b34;
    --cor-dourado: #8f7846;
    --cor-dourado-bri: #a9895a;
    --cor-dourado-solido: #9b8250; /* ver a nota no bloco forçado acima */
    --cor-contraste-escuro: #faf9f5;
    --cor-borda-dourada: rgba(143, 120, 70, 0.30);
    --cor-dourado-texto: #6f5b34;
    --cor-dourado-texto-invertido: #c6a265;
    --grad-botao: linear-gradient(120deg, #6f5b34, #4a3c20);
    --cor-texto: #1a150a;
    --cor-texto-2: #5c5647;
    --cor-sucesso: #2e7d4f;
    --cor-sucesso-texto: #266a43;
    --cor-erro: #a63a2a;
    --cor-erro-solido: #a63a2a;
    --grad-chevron: linear-gradient(120deg, #8f7846, #6f5b34);
    --cor-cabecalho-fundo: rgba(250, 249, 245, 0.9);
    --cor-menu-fundo: rgba(250, 249, 245, 0.98);
    --cor-borda-contorno: rgba(143, 120, 70, 0.30);
    --cor-dourado-tenue: rgba(143, 120, 70, 0.28);
    --cor-veu-claro: rgba(255, 255, 255, 0.35);
    /* Ver a nota do bloco forçado: só a sombra repete, porque a cor dela é
       literal; a escala de superfície acompanha o tema sozinha. */
    --sombra-suspensa: 0 8px 24px rgba(26, 21, 10, 0.18);
    --sombra-destacada: 0 12px 32px rgba(26, 21, 10, 0.20);
    --sombra-modal: 0 20px 60px rgba(26, 21, 10, 0.24);
  }
}

/* foco visível universal (FR-201) */
:focus-visible {
  outline: var(--foco-anel);
  outline-offset: 3px;
  border-radius: 4px;
}

/* skip-link (FR-201) */
.vr7-pular-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  /* Bronze sólido + branco: **6,52:1 nos dois temas**. Era `--cor-dourado` com
     `--cor-contraste-escuro`, que no tema claro dava **4,03:1** — abaixo da AA.
     O skip-link é o primeiro alvo de quem navega por teclado; ilegível ali, a
     pessoa não descobre que ele existe (069.1 · FR-108, faixa 1). */
  background: var(--cor-marca-bronze-forte);
  color: var(--cor-sobre-bronze);
  padding: var(--esp-2) var(--esp-4);
  font-family: var(--fonte-display);
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.vr7-pular-link:focus-visible {
  left: 0;
}

/* ============================================================
   COMPONENTE COMPARTILHADO — FAB "Reportar um problema" (spec 017 · FR-115)
   ------------------------------------------------------------
   Ele existia DUAS vezes, uma em cada folha, com valores diferentes: o
   `vr7.css` usava `--cor-marca-bronze-forte` (medido em 6,5:1 com o texto
   branco nos dois temas) e o `vr7-landing.css` usava o bronze comum, que no
   tema escuro dá ~4,25:1 — abaixo da AA. Ou seja: a correção de contraste da
   069.0 chegou a um dos dois e ninguém percebeu que faltava o outro. É o
   defeito exato que a spec 032 já tivera de desfazer com dois componentes de
   anexo concorrentes, e o motivo de a §V mandar reusar antes de criar.

   Mora AQUI porque este é o arquivo que os DOIS shells carregam — o público e
   o autenticado. O `vr7.css` guarda apenas o **ajuste contextual** de onde a
   barra inferior existe, que é adjetivo, não segunda definição.
   ============================================================ */
.vr7-fab-incidente {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--raio-pill);
  /* Mesma pele da ação principal das telas (`.vr7-btn--primario`, o "Novo
     usuário"): dourado sólido com texto escuro. Era a única peça da plataforma
     com um tom próprio de destaque — duas cores para a mesma hierarquia.

     O par é o mesmo dos dois botões, e por isso o contraste também: 5,09:1 no
     tema claro (#9b8250) e 8,03:1 no escuro (#c5a572), ambos AA. Antes era
     `--cor-marca-bronze-forte` com `--cor-sobre-bronze` (6,5:1, medido pela
     régua da 069.0): também AA, e é por isso que a troca precisa ser medida em
     vez de suposta — o valor novo não herda a garantia do antigo.

     ⚠️ O fundo e o texto mudam JUNTOS (invariante §V · spec 027): o branco de
     antes sobre este dourado dá 3,13:1, que reprova. Quem mexer num, mexe no
     outro. */
  background: var(--cor-dourado-solido);
  color: var(--cor-sobre-dourado);
  font-weight: 600;
  text-decoration: none;
  /* O FAB flutua sobre o conteúdo, então leva sombra — e agora pelo degrau, não
     por geometria escrita aqui com um token só de cor. `--sombra-flutuante` era
     exatamente isso: a prova de que a solução por tema já era conhecida, presa
     no único componente que a usava (spec 071 · research D-003). */
  box-shadow: var(--sombra-suspensa);
}
/* Hover igual ao da ação principal: clareia o dourado e RE-FIXA o texto escuro.
   `filter: brightness()` não serve mais — ele clareia o texto junto, e o par
   aqui é escuro-sobre-claro: o rótulo iria na direção errada. */
.vr7-fab-incidente:hover {
  background: var(--cor-dourado-bri);
  color: var(--cor-sobre-dourado);
}
.vr7-fab-incidente:focus-visible {
  outline: 3px solid var(--cor-dourado);
  outline-offset: 2px;
}
.vr7-fab-incidente__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* Continua o véu CLARO, e isso é contraintuitivo: o fundo virou dourado e o
     primeiro reflexo é escurecer o disco junto com o texto. Composto sobre o
     dourado, um véu preto a 16% derruba o "!" (escuro) para **3,80:1** no tema
     claro — abaixo da AA. O véu branco vai na direção contrária e o deixa em
     7,17:1 (claro) e 9,98:1 (escuro).
     Contrapartida assumida: o disco fica discreto contra o dourado (~1,4:1).
     Ele é ornamento em volta do glifo, não fronteira de controle — quem carrega
     o significado é o "!", e é o "!" que precisa da AA. */
  background: var(--cor-veu-claro);
  font-weight: 800;
}
/* Em telefone, só o ícone. O rótulo fica VISUALMENTE oculto, nunca
   `display: none` — o nome acessível do botão precisa continuar existindo
   (mesma regra da 068 / FR-014). */
@media (max-width: 47.99rem) {
  .vr7-fab-incidente {
    padding: 14px;
  }
  .vr7-fab-incidente__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* ============================================================
   COMPONENTE COMPARTILHADO — crédito da desenvolvedora no rodapé
   ------------------------------------------------------------
   Veio do `vr7.css` em 2026-08-07, quando a vitrine passou a exibi-lo (069.1).
   Uma definição só, nas duas superfícies (FR-115 · §V "reusar antes de criar").

   Na vitrine ele é **clicável** (pedido do dono, 2026-08-07); na área
   autenticada segue só exibindo. O estilo é o mesmo — o que muda é a marcação.
   ============================================================ */
.vr7-rodape__marca-parceiro {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  border-radius: var(--raio);
}
.vr7-rodape__marca-parceiro:focus-visible {
  outline: var(--foco-anel);
  outline-offset: 2px;
}
/* A marca da desenvolvedora tem **duas versões**, e a troca é por tema.

   ⚠️ Este comentário citava `logo-vr7-fundo-claro/escuro.svg` como o padrão que a
   VR7 seguia. Esses arquivos foram **removidos em 2026-08-25** (064.4 · achado
   `003·T036`): eram órfãos, e a marca da VR7 é SVG **inline** (`_logo_vr7.svg`,
   via `{% include %}`), justamente para ser recolorível pelos tokens. O padrão
   das duas versões por tema vale para a marca da desenvolvedora, que é raster.

   Até 2026-08-07 havia uma versão só, colorida, e o wordmark "code" é
   cinza-médio: sobre o preto ele **desaparecia**. O remendo era um **chip
   branco** atrás da logo — que resolvia a legibilidade e criava outro problema:
   um retângulo brilhante no rodapé escuro, chamando mais atenção que um crédito
   secundário merece. Pior, o `padding` do chip era descontado da altura pelo
   `box-sizing: border-box` global, e a logo **encolhia por dentro** (96px no
   claro contra 85px no escuro).

   Com o par certo, o chip some inteiro: sem fundo, sem `padding`, sem
   `box-sizing` de exceção. Uma regra a menos, não a mais.

   A troca é por `content`, e não por dois `<img>` com um escondido: assim há um
   elemento só na marcação, com um `alt` só, e o navegador baixa **uma** imagem.
   Resolvido no CSS, funciona sem JavaScript — o que a vitrine promete (FR-203a). */
.vr7-rodape__marca-parceiro img {
  display: block;
  height: 22px;
  width: auto;
  max-width: none;
  flex: none;
  content: url("../img/logo-bscode-fundo-escuro.png");
}
:root[data-tema="claro"] .vr7-rodape__marca-parceiro img {
  content: url("../img/logo-bscode-fundo-claro.png");
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) .vr7-rodape__marca-parceiro img {
    content: url("../img/logo-bscode-fundo-claro.png");
  }
}

/* Quando é link (vitrine): o alvo de toque de 44px (FR-201) cresce por
   SOBREPOSIÇÃO, invisível ao layout. Com `min-height` no próprio link ele
   ficava com 44px numa faixa de texto de ~12px, esticava a linha do rodapé e
   desalinhava os irmãos — foi o que o dono viu em 2026-08-07. */
.vr7-rodape__marca-parceiro a {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: var(--raio);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.vr7-rodape__marca-parceiro a:hover,
.vr7-rodape__marca-parceiro a:focus-visible {
  opacity: 1;
}
.vr7-rodape__marca-parceiro a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: var(--alvo-toque);
  height: var(--alvo-toque);
}