/* Wrapper for mark SVGs. The SVG itself owns its art via `currentColor`,
   the class controls layout, sizing, and color hand-off. */

.sn-mark {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
  width: var(--sn-mark-size, 32px);
  height: var(--sn-mark-size, 32px);
}

.sn-mark--xs { --sn-mark-size: 16px; }
.sn-mark--sm { --sn-mark-size: 24px; }
.sn-mark--md { --sn-mark-size: 32px; }
.sn-mark--lg { --sn-mark-size: 48px; }
.sn-mark--xl { --sn-mark-size: 64px; }

.sn-mark--accent { color: var(--sn-accent); }
.sn-mark--muted  { color: var(--sn-fg-muted); }

/* Wordmark */
.sn-wordmark {
  font-family: var(--sn-font-mono);
  font-size: var(--sn-wordmark-size, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: currentColor;
  line-height: 1;
}
.sn-wordmark__dot { color: var(--sn-accent); }