/* =============================================================
   Indicalar — Lockup component · v1
   Requires tokens.css imported BEFORE this file.
   ============================================================= */

/* ── Primary lockup [Indicalar] ─────────────────────────────── */
.indicalar-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  line-height: 1;
  white-space: nowrap;
  color: var(--indicalar-ink);
  font-size: 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.indicalar-lockup__bk {
  font: 400 1em/1 var(--indicalar-mono);
  color: var(--indicalar-brasa);
  letter-spacing: -0.04em;
}
.indicalar-lockup__wm {
  font: italic 500 1em/1 var(--indicalar-serif);
  letter-spacing: -0.012em;
  color: inherit;
}

/* size variants */
.indicalar-lockup--xs { font-size: 16px; }
.indicalar-lockup--sm { font-size: 22px; }
.indicalar-lockup--md { font-size: 28px; }
.indicalar-lockup--lg { font-size: 40px; }
.indicalar-lockup--xl { font-size: 64px; }
.indicalar-lockup--hero { font-size: clamp(64px, 13vw, 160px); }

/* colorway variants */
.indicalar-lockup--on-dark {
  color: var(--indicalar-white);
}
.indicalar-lockup--on-dark .indicalar-lockup__bk {
  color: var(--indicalar-brasa-hi);
}

.indicalar-lockup--solid { color: var(--indicalar-ink); }
.indicalar-lockup--solid .indicalar-lockup__bk { color: var(--indicalar-ink); }

.indicalar-lockup--reverse { color: var(--indicalar-white); }
.indicalar-lockup--reverse .indicalar-lockup__bk { color: var(--indicalar-white); }

.indicalar-lockup--accent { color: var(--indicalar-brasa); }
.indicalar-lockup--accent .indicalar-lockup__bk { color: var(--indicalar-brasa); }

/* ── Monogram [i] ───────────────────────────────────────────── */
.indicalar-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--indicalar-ink);
  font-size: 28px;
  -webkit-font-smoothing: antialiased;
}
.indicalar-mark__bk {
  font: 400 1em/1 var(--indicalar-mono);
  color: var(--indicalar-brasa);
  letter-spacing: -0.04em;
}
.indicalar-mark__ii {
  font: italic 500 1em/1 var(--indicalar-serif);
  letter-spacing: -0.02em;
  color: inherit;
}
.indicalar-mark--on-dark { color: var(--indicalar-white); }
.indicalar-mark--on-dark .indicalar-mark__bk { color: var(--indicalar-brasa-hi); }
.indicalar-mark--reverse { color: var(--indicalar-white); }
.indicalar-mark--reverse .indicalar-mark__bk { color: var(--indicalar-white); }

/* ── Avatar tile (wraps a monogram) ─────────────────────────── */
.indicalar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--indicalar-deep);
  color: var(--indicalar-white);
  border-radius: 18%;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}
.indicalar-avatar .indicalar-mark { font-size: 53px; } /* 55% of 96 */
.indicalar-avatar--round { border-radius: 50%; }
.indicalar-avatar--brasa { background: var(--indicalar-brasa); }
.indicalar-avatar--brasa .indicalar-mark__bk,
.indicalar-avatar--brasa .indicalar-mark__ii { color: var(--indicalar-white); }
.indicalar-avatar--cream {
  background: var(--indicalar-brasa-tint);
  color: var(--indicalar-ink);
}
.indicalar-avatar--cream .indicalar-mark__bk { color: var(--indicalar-brasa-deep); }
.indicalar-avatar--cream .indicalar-mark__ii { color: var(--indicalar-ink); }
.indicalar-avatar--paper {
  background: var(--indicalar-white);
  color: var(--indicalar-ink);
  border: 0.5px solid var(--indicalar-line);
}
.indicalar-avatar--paper .indicalar-mark__bk { color: var(--indicalar-brasa); }
.indicalar-avatar--paper .indicalar-mark__ii { color: var(--indicalar-ink); }
.indicalar-avatar--petroleo { background: var(--indicalar-petroleo); }
.indicalar-avatar--petroleo .indicalar-mark__bk,
.indicalar-avatar--petroleo .indicalar-mark__ii { color: var(--indicalar-white); }

/* size variants (use one OR set width/height + font-size manually) */
.indicalar-avatar--16  { width: 16px;  height: 16px;  border-radius: 3px; }
.indicalar-avatar--16  .indicalar-mark { font-size: 10px; }
.indicalar-avatar--24  { width: 24px;  height: 24px;  border-radius: 5px; }
.indicalar-avatar--24  .indicalar-mark { font-size: 15px; }
.indicalar-avatar--32  { width: 32px;  height: 32px;  border-radius: 6px; }
.indicalar-avatar--32  .indicalar-mark { font-size: 20px; }
.indicalar-avatar--40  { width: 40px;  height: 40px;  border-radius: 8px; }
.indicalar-avatar--40  .indicalar-mark { font-size: 22px; }
.indicalar-avatar--56  { width: 56px;  height: 56px;  border-radius: 11px; }
.indicalar-avatar--56  .indicalar-mark { font-size: 31px; }
.indicalar-avatar--72  { width: 72px;  height: 72px;  border-radius: 14px; }
.indicalar-avatar--72  .indicalar-mark { font-size: 40px; }
.indicalar-avatar--96  { width: 96px;  height: 96px;  border-radius: 18px; }
.indicalar-avatar--96  .indicalar-mark { font-size: 53px; }
.indicalar-avatar--128 { width: 128px; height: 128px; border-radius: 24px; }
.indicalar-avatar--128 .indicalar-mark { font-size: 70px; }
.indicalar-avatar--256 { width: 256px; height: 256px; border-radius: 48px; }
.indicalar-avatar--256 .indicalar-mark { font-size: 140px; }
.indicalar-avatar--512 { width: 512px; height: 512px; border-radius: 96px; }
.indicalar-avatar--512 .indicalar-mark { font-size: 280px; }
.indicalar-avatar--1024 { width: 1024px; height: 1024px; border-radius: 192px; }
.indicalar-avatar--1024 .indicalar-mark { font-size: 560px; }