/* Fundação visual do app (vitrine Gravitar, frente 1): extensões dos tokens do Órbita Creme, tema escolhido, regras
   de modo (entrada ou app), escala tipográfica, foco e movimento. Carregado depois de tokens.css e antes de app.css.
   O tokens.css é cópia do design system e não se edita: tudo o que o app acrescenta mora aqui, cada um com a regra.
   Spec: claude-hub/01-areas/08-instagram-central/specs/2026-10-27-vitrine-design.md, seção 4.3. */

:root {
  /* Estados (o sistema não os traz): sempre acompanhados de texto, nunca só a cor. Contraste AA nos dois temas. */
  --bom: #276b43; --warn: var(--clay); --bad: #b3261e;
  --warn-bg: color-mix(in srgb, var(--warn) 12%, var(--canvas));
  --bad-bg: color-mix(in srgb, var(--bad) 12%, var(--canvas));
  --on-signal: #ffffff; /* texto sobre o signal (5,1:1) */
  /* Foco desenhado: anel de 2 px em ink, a 3 px do elemento. */
  --foco: var(--ink);
  /* Movimento: micro, troca de tela e revelação, com a curva de desaceleração forte. */
  --dur-micro: 180ms; --dur-tela: 280ms; --dur-revela: 700ms;
  --saida: cubic-bezier(.16, 1, .3, 1);
  /* Camadas. */
  --z-trilho: 10; --z-folha: 30; --z-aviso: 40;
}

/* Tema escuro do sistema, a menos que a pessoa tenha escolhido o claro em Ajustes. Os tokens do sistema repetem os
   valores de [data-theme="dark"] do tokens.css (que só vale com o atributo). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #141413; --lifted: #1e1d1b; --surface: #2a2927; --ink: #f3f0ee; --on-ink: #141413;
    --charcoal: #dcd7d2; --slate: #a8a39d; --ghost: #24221f; --dust: #4a4642; --clay: #d4703c;
    --link: #7d9ce6; --footer: #0b0b0a;
    --bom: #6fcf97; --warn: #e08a5a; --bad: #f2b8b5;
    color-scheme: dark;
  }
}
/* Escuro escolhido em Ajustes: os tokens do sistema vêm do [data-theme="dark"] do tokens.css; aqui, as extensões. */
:root[data-theme="dark"] {
  --bom: #6fcf97; --warn: #e08a5a; --bad: #f2b8b5;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Modo da abertura (js/inicio.js): a página de entrada e o app nunca aparecem juntos. */
html[data-modo="entrada"] .casca { display: none; }
html[data-modo="app"] .entrada { display: none; }

/* Escala tipográfica: só Sofia Sans, pesos 450, 500 e 700. Sem contêiner declarado (R-E3), cqi vale a largura da janela. */
.sobre { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--charcoal); }
.sobre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.display { font-size: clamp(42px, 7.2cqi, 76px); font-weight: 500; letter-spacing: -.028em; line-height: 1; text-wrap: balance; }
.titulo-tela { font-size: clamp(36px, 5.4cqi, 56px); font-weight: 500; letter-spacing: -.025em; line-height: 1; }
/* O número-destaque usa a largura da janela (R-E3): 2,4vw cabe em 4 colunas da coluna principal do Hoje no desktop. */
.destaque-valor { font-size: clamp(30px, 2.4vw, 40px); font-weight: 450; letter-spacing: -.025em; line-height: 1.05;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.destaque-valor .un { font-size: .48em; font-weight: 500; letter-spacing: 0; margin-left: .18em; color: var(--charcoal); }

/* Foco visível desenhado, no lugar do contorno padrão. */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

/* "Reduzir movimento" desliga toda animação e transição de CSS (as do Motion já checam a preferência em JS). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}