/* =============================================================
   brand.css — Wordmark L4 oficial Indicalar
   Operador escolheu L4 do Claude Design memo:
   "[ Indicalar ]" — colchetes mono em accent + serif italic dentro.
   Símbolo [i] funciona como ícone de "info" (duplo significado).
   ============================================================= */

/* Wordmark inline (header / footer / qualquer texto) */
.brand-l4 {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-decoration: none;
  line-height: 1;
}
.brand-l4 .bk {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-weight: 400;
  font-size: 0.92em;
  color: var(--promo-warm, #E04A1E);
}
.brand-l4 .ii {
  font-style: italic;
  font-family: 'Source Serif 4', Georgia, serif;
  color: inherit;
}

/* Variant pra header escuro do site (mesma cor do brackets, texto claro) */
.site-header .brand.brand-l4 .ii { color: var(--accent, oklch(62% 0.16 55)); font-style: italic; }
.site-header .brand.brand-l4 .bk { color: var(--accent, oklch(62% 0.16 55)); }

/* Variant pro footer escuro */
.footer-brand .brand-l4 .ii { color: var(--accent, oklch(62% 0.16 55)); font-style: italic; }
.footer-brand .brand-l4 .bk { color: var(--accent, oklch(62% 0.16 55)); }

/* Mark [i] — usado em avatar do mockup celular + futuros canais social */
.mark-l4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-weight: 400;
  background: var(--promo-paper-deep, oklch(20% 0.04 40));
  color: #fff;
  border-radius: 8px;
  padding: 0.25em 0.5em;
  letter-spacing: -0.05em;
}
.mark-l4 .bk {
  color: var(--promo-warm, #E04A1E);
  font-family: var(--mono, 'JetBrains Mono', monospace);
}
.mark-l4 .ii {
  color: #fff;
  font-style: italic;
  font-family: 'Source Serif 4', Georgia, serif;
  padding: 0 0.1em;
}
.mark-l4.round { border-radius: 50%; padding: 0.4em 0.55em; }
.mark-l4.sm { font-size: 14px; padding: 0.18em 0.35em; }
.mark-l4.md { font-size: 22px; }
.mark-l4.lg { font-size: 32px; padding: 0.3em 0.55em; }