/* =============================================================
   Typography roles + helper classes
   Aligned with the brand-language spec: Satoshi for display/body,
   JetBrains Mono for data labels and the "EXPERTS" lockup mono.
   ============================================================= */

/* ── Type roles ────────────────────────────────────────────── */
.aise-display { font-family: var(--aise-sans); font-weight: 500; font-size: 48px; line-height: 1.02; letter-spacing: -0.02em; }
.aise-h1      { font-family: var(--aise-sans); font-weight: 500; font-size: 36px; line-height: 1.05; letter-spacing: -0.018em; }
.aise-h2      { font-family: var(--aise-sans); font-weight: 500; font-size: 28px; line-height: 1.10; letter-spacing: -0.012em; }
.aise-h3      { font-family: var(--aise-sans); font-weight: 500; font-size: 22px; line-height: 1.20; letter-spacing: -0.008em; }
.aise-h4      { font-family: var(--aise-sans); font-weight: 500; font-size: 18px; line-height: 1.25; }
.aise-body-l  { font-family: var(--aise-sans); font-weight: 400; font-size: 17px; line-height: 1.50; }
.aise-body    { font-family: var(--aise-sans); font-weight: 400; font-size: 15px; line-height: 1.55; }
.aise-body-s  { font-family: var(--aise-sans); font-weight: 400; font-size: 13px; line-height: 1.50; }
.aise-caption { font-family: var(--aise-sans); font-weight: 400; font-size: 11px; line-height: 1.40; color: var(--aise-text-muted); }

.aise-mono {
  font-family: var(--aise-mono);
  font-size: 13px;
  letter-spacing: 0;
}

.aise-eyebrow {
  font-family: var(--aise-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--aise-text-muted);
}
.aise-eyebrow .slash {
  color: var(--aise-accent);
  margin-right: 6px;
}

/* ── Hairline divider ──────────────────────────────────────── */
.aise-hr {
  border: 0;
  border-top: 1px solid var(--aise-border);
  margin: 0;
}
.aise-hr-strong {
  border-top-color: var(--aise-border-strong);
}

/* ── Wordmark lockup (mark + "AI Search" + EXPERTS) ───────── */
.aise-wordmark {
  font-family: var(--aise-sans);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 0.92;
  color: var(--aise-text);
}
.aise-wordmark .experts {
  display: block;
  font-family: var(--aise-mono);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--aise-text-muted);
  margin-top: 4px;
}

/* ── Gradient text helper ──────────────────────────────────── */
.t-grad {
  background: linear-gradient(135deg, var(--aise-accent-500), var(--aise-accent-300));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
[data-theme="dark"] .t-grad {
  background: linear-gradient(135deg, var(--aise-accent-300), var(--aise-accent-200));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ── Color helpers ─────────────────────────────────────────── */
.text-muted  { color: var(--aise-text-muted); }
.text-accent { color: var(--aise-accent); }
.text-white  { color: var(--aise-white); }