/* ============================================================
   Solvio — Base layer
   Minimal reset + the signature wordmark utility classes.
   The SOLVIO / SolvAI mark is pure type (JetBrains Mono) plus a
   mint caret block — reusable anywhere via these classes.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-strong);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use Schibsted Grotesk — body & UI stay Inter Tight. */
h1, h2, h3, h4 { font-family: var(--f-head); }

/* ---- Mono eyebrow / label: the recurring "// uppercase" tag ---- */
.sv-label {
  font-family: var(--f-mono);
  font-size: var(--t-label-size);
  letter-spacing: var(--t-label-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   Wordmark — .solvio  (SOLV[mint] IO  + caret)
   ============================================================ */
.solvio {
  font-family: var(--f-mono);
  font-weight: var(--fw-bold);
  letter-spacing: var(--t-wordmark-ls);
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.solvio .solv  { color: var(--mint); }
.solvio .caret {
  display: inline-block;
  width: 0.55em;
  height: 0.85em;
  background: var(--mint);
  margin-left: 0.1em;
  transform: translateY(0.05em);
}
/* Blinking caret — only when explicitly opted in */
.solvio.live .caret { animation: solvio-blink 1.05s steps(1, start) infinite; }

/* On dark surfaces, the mint brightens */
.solvio.on-dark        { color: var(--bone); }
.solvio.on-dark .solv  { color: var(--mint); }
.solvio.on-dark .caret { background: var(--mint); }

/* ============================================================
   SolvAI lockup — .solvai  (SOLV[mint] AI[lavender] + caret)
   ============================================================ */
.solvai {
  font-family: var(--f-mono);
  font-weight: var(--fw-bold);
  letter-spacing: var(--t-wordmark-ls);
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.solvai .solv  { color: var(--mint); }
.solvai .ai    { color: var(--ai-deep); }
.solvai .caret {
  display: inline-block;
  width: 0.55em;
  height: 0.85em;
  background: var(--ai-deep);
  margin-left: 0.1em;
  transform: translateY(0.05em);
}
.solvai.live .caret { animation: solvio-blink 1.05s steps(1, start) infinite; }
.solvai.on-dark        { color: var(--bone); }
.solvai.on-dark .solv  { color: var(--mint); }
.solvai.on-dark .ai    { color: var(--ai); }
.solvai.on-dark .caret { background: var(--ai); }

@media (prefers-reduced-motion: reduce) {
  .solvio .caret, .solvai .caret { animation: none !important; }
}