/* Tema do app no formato do Instagram (Gravitar v2, 29/10/2026), a pedido do Caio, a partir dos tokens documentados em
   C:\Users\caioh\Repos\instagram-design-system (tokens/colors.css, typography.css, spacing.css e manual/05-components):
   neutros da interface, separador, botões em três níveis, raio de 8 px nos botões e 12 px nos modais, e o tema escuro.
   Fica de fora o que é marca registrada ou licença proprietária da Meta: a fonte Instagram Sans (e a Optimistic), o
   degradê da marca e o logotipo. No lugar da fonte, a do sistema (a mesma pilha da interface web do Instagram).
   Acessibilidade: o azul #0095F6 com texto branco dá ≈ 3:1; nos botões com texto vai o azul escuro da mesma família
   (#0064E0, 5,1:1), e o #0095F6 fica em anéis, ícones e detalhes (3:1 em componentes de interface).
   Vale só no app (html[data-modo="app"]): a página de entrada continua com a marca Gravitar (Órbita Creme). */

html[data-modo="app"] {
  --canvas: #ffffff; --lifted: #f3f5f7; --surface: #ffffff; --ghost: #efefef; --dust: #dbdbdb;
  --ink: #000000; --on-ink: #ffffff; --charcoal: #262626; --slate: #737373;
  --arc: #0095f6; --signal: #0064e0; --clay: #9a3412; --link: #00376b;
  --on-signal: #ffffff; --bad: #c62828; --bom: #2e7d32;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-btn: 8px; --radius-stadium: 12px; --radius-pill-sm: 8px;
  --shadow-nav: none; --shadow-halo: 0 0 0 1px #dbdbdb;
  --line: #dbdbdb; --muted: #737373; --foco: #0064e0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-modo="app"]:not([data-theme="light"]) {
    --canvas: #0c1014; --lifted: #25292e; --surface: #212328; --ghost: #262626; --dust: #363636;
    --ink: #f5f5f5; --on-ink: #000000; --charcoal: #e0e0e0; --slate: #a8a8a8;
    --arc: #0095f6; --signal: #4a9df8; --link: #e0f1ff; --on-signal: #000000; --bad: #ff6b6b; --bom: #6fcf97;
    --shadow-halo: 0 0 0 1px #363636; --line: #363636; --muted: #a8a8a8; --foco: #4a9df8;
    color-scheme: dark;
  }
}
html[data-modo="app"][data-theme="dark"] {
  --canvas: #0c1014; --lifted: #25292e; --surface: #212328; --ghost: #262626; --dust: #363636;
  --ink: #f5f5f5; --on-ink: #000000; --charcoal: #e0e0e0; --slate: #a8a8a8;
  --arc: #0095f6; --signal: #4a9df8; --link: #e0f1ff; --on-signal: #000000; --bad: #ff6b6b; --bom: #6fcf97;
  --shadow-halo: 0 0 0 1px #363636; --line: #363636; --muted: #a8a8a8; --foco: #4a9df8;
  color-scheme: dark;
}

/* Tipografia de produto: a fonte do sistema, títulos firmes e compactos (a escala system-24/system-16). */
html[data-modo="app"] body { font: 400 15px/1.45 var(--font-sans); --bg: var(--canvas); --card: var(--surface); --fg: var(--ink); }
html[data-modo="app"] .titulo-tela { font-size: 24px; line-height: 27px; font-weight: 700; letter-spacing: 0; }
html[data-modo="app"] .marca-dagua { display: none; }
html[data-modo="app"] .topo { align-items: center; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: 12px;
  margin-bottom: 8px; border-bottom: 1px solid var(--line); }
html[data-modo="app"] .secao { font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
html[data-modo="app"] .secao::before, html[data-modo="app"] .sobre::before { display: none; }
html[data-modo="app"] .sobre { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--slate); }

/* Botões em três níveis: primário azul, secundário cinza claro, terciário com borda. Raio de 8 px. */
html[data-modo="app"] .primario { background: var(--signal); color: var(--on-signal); border: 0; border-radius: 8px; font-weight: 600; }
html[data-modo="app"] .secundario { background: var(--ghost); color: var(--ink); border: 0; border-radius: 8px; font-weight: 600; }
html[data-modo="app"] .perigo-linha, html[data-modo="app"] .seg, html[data-modo="app"] .chip { border-radius: 8px; }
@media (hover: hover) {
  html[data-modo="app"] .primario:hover { filter: brightness(.94); }
  html[data-modo="app"] .secundario:hover { background: var(--dust); }
}

/* Barra de baixo como a do app: presa à base, de ponta a ponta, separador em cima, ícone e rótulo pequenos; a aba
   atual em tinta, sem pílula. */
html[data-modo="app"] .tabs { position: sticky; bottom: 0; width: 100%; max-width: none; margin: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  gap: 0; border-radius: 0; background: var(--canvas); box-shadow: 0 -1px 0 var(--line); }
html[data-modo="app"] .tab { border-radius: 8px; color: var(--slate); font-size: 10px; font-weight: 500; }
html[data-modo="app"] .tab[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 700; }
html[data-modo="app"] .tab[aria-current="page"] svg { stroke-width: 2.4; }
html[data-modo="app"] .tab-criar svg { color: currentColor; }

/* Trilho do notebook: a coluna do Instagram web, sem fundo próprio, com separador à direita. */
html[data-modo="app"] .trilho { background: var(--canvas); border-right: 1px solid var(--line); }
html[data-modo="app"] .nav-item { border-radius: 8px; color: var(--ink); font-weight: 400; }
html[data-modo="app"] .nav-item[aria-current="page"] { background: transparent; font-weight: 700; }
@media (hover: hover) { html[data-modo="app"] .nav-item:hover { background: var(--ghost); } }

/* Cartões e listas: superfícies chapadas com contorno de 1 px, sem sombra (o Instagram não usa elevação no feed). */
html[data-modo="app"] .cartao, html[data-modo="app"] .criar-cartao, html[data-modo="app"] .destaque { box-shadow: 0 0 0 1px var(--line); border-radius: 12px; }

/* Perfil: o anel do avatar em azul (o degradê da marca fica de fora) e números em negrito, como no app. */
html[data-modo="app"] .pc-avatar { background: var(--arc); }
html[data-modo="app"] .pc-arroba { font-size: 20px; font-weight: 400; }
html[data-modo="app"] .pc-num strong { font-weight: 600; }
html[data-modo="app"] .cab-avatar { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--line); }
html[data-modo="app"] .cab-conta[aria-current="page"] .cab-avatar { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--ink); }
html[data-modo="app"] .grade-posts { gap: 2px; }
html[data-modo="app"] .gp-eng { border-radius: 4px; }
html[data-modo="app"] #perfilSel { border: 0; background-color: transparent; font-weight: 700; font-size: 17px; padding-left: 4px; }