/* ============================================================================
   iAi — Design System · o vocabulário da casa
   Onda 2 (04/09/2026). Fonte única dos tokens. Toda página linka este arquivo e
   declara localmente APENAS o que diverge — e divergir passa a ser uma linha
   visível, não um valor escondido no meio de 3 mil linhas de CSS.

   Até aqui o projeto falava TRÊS vocabulários para o mesmo sistema:
   --obsidiana/--marfim (27 páginas), --pergaminho/--tinta e o canônico do
   CLAUDE.md §2 (10). Os valores eram os MESMOS — só os nomes divergiam —, então
   a unificação foi rename puro: 1.962 substituições, zero mudança visual,
   verificada valor a valor contra o estado anterior.

   NÃO altere um valor aqui sem o "Assim é" do Mentor: estes tons estão no
   CLAUDE.md §2 e governam as 40 páginas de uma vez.
   ========================================================================== */

:root {
  /* ── Fundos — a noite da casa ─────────────────────────────────────────── */
  --noite:  #131019;   /* fundo profundo da página */
  --noite2: #1B1524;   /* cartões */
  --noite3: #231A30;   /* cartões em foco */
  --noite4: #0E0B14;   /* o mais fundo — rodapés, poços */

  /* ── Texto — pergaminho, nunca branco puro ────────────────────────────── */
  --perg:  #EFE7D6;    /* texto principal */
  --perg2: #B9AE97;    /* texto de apoio */
  --perg3: #8F8672;    /* legendas e notas */

  /* ── Ouro — o acento da casa ──────────────────────────────────────────── */
  --ouro:  #D4A94E;
  --ouro2: #E4C170;    /* ouro claro, para brilho e realce */
  --ourod: #A8843A;    /* ouro escuro, para bordas e sombra */

  /* ── Violeta ──────────────────────────────────────────────────────────── */
  --viol:  #9B5FC6;
  --viol2: #6C4390;
  --viol3: #3A2A52;

  /* ── Oliva — a oliveira de Atena ──────────────────────────────────────── */
  --oliva:  #7C9161;
  --oliva2: #59704A;

  /* ── Espectro GET-137 — as sete Estações, na ordem da Travessia ───────── */
  --f1: #D95F4C;  /* I  · SEMENTE */
  --f2: #E08A3C;  /* II · RAIZ    */
  --f3: #DDB93F;  /* III· TRONCO  */
  --f4: #5FA873;  /* IV · GALHOS  */
  --f5: #5D9BC0;  /* V  · FOLHAS  */
  --f6: #7B86D6;  /* VI · FLOR    */
  --f7: #A96BD4;  /* VII· FRUTO   */
}

/* ============================================================================
   COMPONENTES — Onda 3 (04/09/2026)

   Aqui está o desenho CANÔNICO da casa. Ele governa página NOVA: quem linkar a
   folha herda um botão, um cartão e um Selo prontos, sem copiar de um vizinho.

   As páginas existentes NÃO foram redesenhadas, e isso é decisão consciente. A
   medição mostrou que não havia o que unificar sem mudar aparência: `.btn` tem
   9 implementações e o padding mais comum aparece em 29% delas; `.card` tem 8 e
   NENHUMA propriedade reúne 40% de acordo. Unificar as existentes é redesenho,
   não refatoração — precisa do olho do Mentor, e está registrado no backlog §5.

   Cada página segue vencendo esta folha (o <link> vem antes do <style> local),
   então quem já tem o seu botão continua com ele.
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--ouro);
  border-radius: 8px;
  background: linear-gradient(150deg, var(--ouro2), var(--ouro));
  color: #1E1508;
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.5;          /* nunca abaixo de 1.5 em Cinzel — Protocolo §3 */
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.card {
  position: relative;
  width: 100%;
  padding: 26px 24px;
  border: 1px solid var(--linha, rgba(212,169,78,.20));
  border-radius: 14px;
  background: var(--noite2);
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}

/* O Selo de Semeadura — no rodapé e na margem.
   Um nome só para cada, desde 04/09/2026: antes o vertical atendia por
   `selo-vertical`, `selo-v` e `selo-vert`, e auditar por nome deixou o tp7.html
   passar por DUAS varreduras sem o selo de rodapé. */
.selo-inline {
  font-family: 'Cinzel', serif;
  font-size: .84rem;
  letter-spacing: .18em;
  line-height: 2;
  margin-top: .8rem;
  color: var(--ouro);
  text-transform: uppercase;
}

.selo-vertical {
  position: fixed;
  left: 10px;
  bottom: 24px;
  z-index: 5;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: .28em;
  line-height: 1.6;
  color: var(--ourod);
  pointer-events: none;
}
/* O Selo vertical se recolhe onde não cabe — Protocolo §3, prova 4. */
@media (max-width: 1120px) { .selo-vertical { display: none; } }