/* ============================================================
   Baaxapp · Landing page base styles
   Pairs with tokens.css — must be loaded after it.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--baax-night-deep);
  color: var(--baax-cool-50);
  font-family: var(--baax-font-body);
  font-size: var(--baax-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--baax-font-display);
  font-weight: var(--baax-weight-bold);
  letter-spacing: -0.02em;
  color: var(--baax-white);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; color: var(--baax-gray-300); }
a { color: var(--baax-jade); text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.baax-container {
  max-width: var(--baax-container-max);
  margin: 0 auto;
  padding: 0 var(--baax-container-pad);
}

/* ---------- Buttons ---------- */
.baax-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--baax-space-2);
  font-family: var(--baax-font-body);
  font-weight: var(--baax-weight-semibold);
  font-size: var(--baax-text-body);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--baax-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--baax-dur-fast) var(--baax-ease-out),
              background var(--baax-dur-base) var(--baax-ease-out),
              box-shadow var(--baax-dur-base) var(--baax-ease-out);
  white-space: nowrap;
}
.baax-btn:active { transform: translateY(1px); }

.baax-btn-primary {
  background: var(--baax-jade);
  color: var(--baax-night-deep);
  box-shadow: var(--baax-shadow-glow);
}
.baax-btn-primary:hover { background: var(--baax-jade-deep); }

.baax-btn-secondary {
  background: transparent;
  color: var(--baax-white);
  border-color: var(--baax-border);
}
.baax-btn-secondary:hover { border-color: var(--baax-jade); color: var(--baax-jade); }

.baax-btn-ghost {
  background: transparent;
  color: var(--baax-cool-50);
}
.baax-btn-ghost:hover { color: var(--baax-jade); }

/* ---------- Utility ---------- */
.baax-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--baax-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--baax-jade);
}
.baax-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--baax-jade);
}

.baax-gradient-text {
  background: var(--baax-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.baax-section { padding: var(--baax-space-32) 0; border-bottom: 1px solid var(--baax-surface-1); }

/* ---------- Brand mark inline ---------- */
.baax-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--baax-space-3);
  font-family: var(--baax-font-display);
  font-weight: var(--baax-weight-black);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--baax-white);
}
.baax-brand .accent { color: var(--baax-jade); }
.baax-brand svg { width: 24px; height: 28px; }

@media (max-width: 900px) {
  :root { --baax-container-pad: 24px; }
  .baax-section { padding: var(--baax-space-20) 0; }
}