/* arets.ai — brand tokens
   Single source of truth for colors, typography, and logo styling. */

:root {
  /* Palette */
  --arets-ink:    #0A0A0A;
  --arets-paper:  #F5F5F7;
  --arets-signal: #004E78;

  /* Typography */
  --arets-font: -apple-system, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --arets-wordmark-weight:   500;
  --arets-wordmark-tracking: -0.04em;

  /* Shape */
  --arets-monogram-radius: 23%;
}

/* Text wordmark — mirrors wordmark.svg.
   Usage: <span class="arets-wordmark">arets<span class="arets-wordmark__ai">.ai</span></span> */
.arets-wordmark {
  font-family: var(--arets-font);
  font-weight: var(--arets-wordmark-weight);
  letter-spacing: var(--arets-wordmark-tracking);
  color: var(--arets-ink);
  display: inline-block;
  line-height: 1;
}
.arets-wordmark__ai {
  color: var(--arets-signal);
}

/* Monogram container — mirrors monogram.svg / monogram-light.svg.
   Usage: <div class="arets-monogram arets-monogram--dark"></div> with an SVG inside. */
.arets-monogram {
  aspect-ratio: 1 / 1;
  border-radius: var(--arets-monogram-radius);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}
.arets-monogram--light { background: var(--arets-paper); }
.arets-monogram--dark  { background: var(--arets-ink); }