/* =====================================================================
   Nexus UI — the one shared button set and type scale (23 Oct 2026)
   Plain buttons: no gradients, no glows, no pill capsules.
   Pages opt in by linking this file and using the ui- classes below;
   nothing changes on a page until it does.
   ===================================================================== */

:root {
  --ui-bg: #04040a;
  --ui-text: #f4f4f5;
  --ui-muted: #a1a1aa;
  --ui-line: rgba(255, 255, 255, .12);
  --ui-line-strong: rgba(255, 255, 255, .3);
  --ui-accent: #22d3ee;
  --ui-danger: #ef4444;
  --ui-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-radius: 10px;

  --ui-t-display: 56px;
  --ui-t-h1: 36px;
  --ui-t-h2: 26px;
  --ui-t-h3: 20px;
  --ui-t-lead: 17px;
  --ui-t-body: 15px;
  --ui-t-small: 13px;
}

@media (max-width: 640px) {
  :root { --ui-t-display: 40px; --ui-t-h1: 28px; --ui-t-h2: 22px; }
}

/* ---------- Buttons ---------- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--ui-text);
  font: 500 var(--ui-t-body)/1 var(--ui-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ui-btn svg { width: 18px; height: 18px; flex: none; }
.ui-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

.ui-btn--primary { background: #fff; color: #09090b; }
.ui-btn--primary:hover { background: #e4e4e7; }

.ui-btn--secondary { border-color: var(--ui-line); }
.ui-btn--secondary:hover { border-color: var(--ui-line-strong); background: rgba(255, 255, 255, .04); }

.ui-btn--ghost { color: var(--ui-muted); padding: 0 12px; }
.ui-btn--ghost:hover { color: var(--ui-text); background: rgba(255, 255, 255, .05); }

.ui-btn--danger { color: var(--ui-danger); border-color: rgba(239, 68, 68, .4); }
.ui-btn--danger:hover { background: rgba(239, 68, 68, .1); }

.ui-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.ui-btn--icon { width: 44px; padding: 0; }
.ui-btn--sm.ui-btn--icon { width: 36px; }

/* ---------- Type ---------- */
.ui-display, .ui-h1, .ui-h2, .ui-h3 { font-family: var(--ui-font); font-weight: 600; color: var(--ui-text); margin: 0; }
.ui-display { font-size: var(--ui-t-display); letter-spacing: -.03em; line-height: 1.05; }
.ui-h1 { font-size: var(--ui-t-h1); letter-spacing: -.02em; line-height: 1.15; }
.ui-h2 { font-size: var(--ui-t-h2); letter-spacing: -.01em; line-height: 1.25; }
.ui-h3 { font-size: var(--ui-t-h3); line-height: 1.3; }
.ui-lead { font: 400 var(--ui-t-lead)/1.55 var(--ui-font); color: var(--ui-muted); }
.ui-body { font: 400 var(--ui-t-body)/1.55 var(--ui-font); }
.ui-small { font: 400 var(--ui-t-small)/1.5 var(--ui-font); color: var(--ui-muted); }