/* Identidade visual ThatsIt: tinta #0b0b0b, papel #f4f1ec, vermelho #e04636 (mesmos tokens do site). */
:root {
  --ti-ink: #0b0b0b;
  --ti-ink-2: #151413;
  --ti-ink-3: #211f1d;
  --ti-paper: #f4f1ec;
  --ti-paper-2: #ece7de;
  --ti-paper-3: #e4dfd5;
  --ti-red: #e04636;
  --ti-red-hi: #ff5a47;
  --ti-line-dark: rgb(244 241 236 / 0.14);
  --brand-color: #e04636;
}

/* Logo oficial (off-white + vermelho, feito para fundo escuro): no modo claro fica sobre tinta */
.ti-logo-caixa { display: inline-flex; align-items: center; background: var(--ti-ink); border-radius: 0.5rem; padding: 0.4rem 0.75rem; }
.ti-logo-caixa img { width: auto; }
html.dark .ti-logo-caixa { background: transparent; padding: 0; }

/* Modo claro (papel) */
html:not(.dark) body { background-color: var(--ti-paper); color: var(--ti-ink); }
html:not(.dark) .bg-white { background-color: #fbf9f5; }
html:not(.dark) .bg-gray-50, html:not(.dark) .bg-gray-100 { background-color: var(--ti-paper-2); }
html:not(.dark) .hover\:bg-gray-100:hover, html:not(.dark) .hover\:bg-gray-50:hover { background-color: var(--ti-paper-2); }
html:not(.dark) .bg-gray-200 { background-color: var(--ti-paper-3); }
html:not(.dark) .border-gray-200, html:not(.dark) .border-gray-300 { border-color: var(--ti-paper-3); }
html:not(.dark) .text-gray-800, html:not(.dark) .text-gray-600 { color: var(--ti-ink-2); }

/* Modo escuro (tinta) */
html.dark body, html.dark .dark\:bg-gray-950 { background-color: var(--ti-ink); }
html.dark .dark\:bg-gray-900 { background-color: var(--ti-ink-2); }
html.dark .dark\:bg-gray-800 { background-color: var(--ti-ink-3); }
html.dark .dark\:hover\:bg-gray-950:hover { background-color: var(--ti-ink); }
html.dark .dark\:hover\:bg-gray-800:hover { background-color: var(--ti-ink-3); }
html.dark .dark\:border-gray-800, html.dark .dark\:border-gray-900 { border-color: var(--ti-line-dark); }
html.dark .dark\:text-white, html.dark .dark\:text-gray-300 { color: var(--ti-paper); }

/* Acentos em vermelho ThatsIt (botões primários, links, foco) */
.primary-button, .bg-brandColor { background-color: var(--ti-red); border-color: var(--ti-red); color: #fff; }
.primary-button:hover { background-color: var(--ti-red-hi); border-color: var(--ti-red-hi); }
.text-brandColor { color: var(--ti-red); }
:focus-visible { outline-color: var(--ti-red-hi); }

/* Avatar do perfil: símbolo da ThatsIt sobre papel (o ícone é preto, precisa de fundo claro) */
.ti-avatar { background-color: var(--ti-paper); }