/**
 * RVRSE Typography — Brand Book V2
 * Font roles: Fraunces (display) · Inter (UI) · JetBrains Mono (numbers)
 * DEC-005 | Space Grotesk and Noto Sans are deprecated.
 */

/* ═══════════════════════════════════════════════════════════════════
   WORDMARK & LOGO
   ═══════════════════════════════════════════════════════════════════ */

.wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--color-ivory);
  text-transform: uppercase;
  line-height: 1;
  font-size: 15px;
}

.wordmark-tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--color-muted);
  text-transform: uppercase;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   DISPLAY / EDITORIAL  (Fraunces — hero copy only)
   ═══════════════════════════════════════════════════════════════════ */

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  color: var(--color-ivory);
}

.display-italic {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  color: var(--color-ivory);
}

/* ═══════════════════════════════════════════════════════════════════
   UI HEADINGS  (Inter)
   ═══════════════════════════════════════════════════════════════════ */

h1, .h1 { font-family: var(--font-sans); font-size: 24px; font-weight: 700; color: var(--color-ivory); line-height: 1.25; }
h2, .h2 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--color-ivory); line-height: 1.3;  }
h3, .h3 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--color-ivory); line-height: 1.4;  }
h4, .h4 { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-ivory); line-height: 1.4;  }

/* ═══════════════════════════════════════════════════════════════════
   LABELS
   ═══════════════════════════════════════════════════════════════════ */

.label-xs {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1;
}

.label-sm {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   BODY TEXT
   ═══════════════════════════════════════════════════════════════════ */

.text-body    { font-size: 14px; color: var(--color-pearl); line-height: 1.6; }
.text-caption { font-size: 12px; color: var(--color-muted); line-height: 1.5; }
.text-ivory   { color: var(--color-ivory); }
.text-muted   { color: var(--color-muted); }
.text-danger  { color: var(--color-signal-red); }
.text-warning { color: var(--color-signal-amber); }
.text-success { color: var(--color-emerald-soft); }
.text-champagne { color: var(--color-champagne); }

/* ═══════════════════════════════════════════════════════════════════
   TOKEN / MONOSPACE DISPLAY  (JetBrains Mono)
   ═══════════════════════════════════════════════════════════════════ */

/* Primary TKN amount */
.tkn {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-platinum);
  letter-spacing: .01em;
}

/* " TKN" suffix */
.tkn-suffix {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--color-muted);
  font-size: .82em;
  text-transform: uppercase;
}

/* "≈ $X.XXX CLP" secondary display */
.tkn-clp {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-muted);
  font-size: .78em;
}

/* Large stat value (dashboard KPIs) */
.tkn-lg {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  color: var(--color-ivory);
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════════════════
   BLIND IDENTITY CODES  (DEC-012)
   ═══════════════════════════════════════════════════════════════════ */

.identity-buyer {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-identity-buyer);
  letter-spacing: .06em;
}

.identity-seller {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-identity-seller);
  letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION LINKS
   ═══════════════════════════════════════════════════════════════════ */

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--color-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.nav-link:hover { color: var(--color-ivory); }
.nav-link.active {
  color: var(--color-ivory);
  background: var(--color-graphite);
}

/* Nav section label */
.nav-section-label {
  padding: 12px 12px 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

/* ═══════════════════════════════════════════════════════════════════
   WIREFRAME ANNOTATIONS
   ═══════════════════════════════════════════════════════════════════ */

.annotation {
  border-left: 3px solid var(--color-champagne);
  background: rgba(200, 169, 106, 0.07);
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-champagne);
  margin-top: 4px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.5;
}