/* ============================================================
   Modern LeanScale — Base primitives & utility classes
   Element defaults plus a small set of utility classes used in
   spec cards and quick HTML. The JSX components are the canonical
   API; these classes mirror them for plain-HTML contexts.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .m-h1 { font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; }
h2, .m-h2 { font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; }
h3, .m-h3 { font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; }
h4, .m-h4 { font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug); margin: 0; }
p,  .m-body { font-weight: var(--fw-regular); font-size: var(--fs-base); line-height: var(--lh-normal); margin: 0; }
.m-display { font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }

.m-grad-text {
  background: var(--m-grad-purple);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- TAG eyebrow — soft pill by default ---------- */
.m-tag {
  display: inline-flex;
  align-items: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tag);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--m-lavender-wash);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.m-btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  line-height: 1;
}
.m-btn:active { transform: translateY(1px) scale(0.99); }
.m-btn-primary { background: var(--m-grad-purple); color: #fff; box-shadow: var(--shadow-md); }
.m-btn-primary:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.m-btn-soft { background: var(--m-lavender-wash); color: var(--m-purple-700); }
.m-btn-soft:hover { background: var(--m-surface-3); }
.m-btn-ghost { background: transparent; color: var(--accent); border-color: var(--border-strong); }
.m-btn-ghost:hover { background: var(--m-lavender-wash); }
.m-btn-lime { background: var(--ls-lime); color: var(--ls-dark-purple); }
.m-btn-lime:hover { filter: brightness(0.97); }

/* ---------- Card ---------- */
.m-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
  padding: var(--space-5);
}
.m-card-lg { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ---------- Glass ---------- */
.m-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ---------- Chip ---------- */
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  background: var(--m-surface-2); color: var(--m-purple-700);
  white-space: nowrap;
}

/* ---------- Input ---------- */
.m-input {
  font: inherit;
  font-size: var(--fs-sm);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--m-card);
  color: var(--fg-primary);
  outline: none;
  transition: border var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.m-input::placeholder { color: var(--fg-faint); }
.m-input:focus { border-color: var(--accent); box-shadow: var(--shadow-glow); }