/* ============================================================
   base.css — resets, body typography, links, images,
   the shared .live-dot pulse, and the .btn family.
   ------------------------------------------------------------
   Depends on: tokens.css
   No structural chrome (nav/footer/container) lives here —
   that's chrome.css.
   ============================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Prevent horizontal scroll site-wide. Any element that pushes past the
     viewport (wide mockups, off-screen art, long text without breaks) gets
     clipped rather than triggering a horizontal scrollbar. `clip` is preferred
     over `hidden` so position:sticky etc. still work normally. */
  overflow-x: clip;
}
body { overflow-x: clip; }

/* Defensive: media never exceeds its container on mobile */
img, svg, video, iframe { max-width: 100%; height: auto; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--body);
  background: var(--bg);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

a       { color: var(--slate-blue); text-decoration: none; }
a:hover { color: var(--slate-blue-deep); }

img { max-width: 100%; display: block; }

/* ------------------------------------------------------------
   Shared utility — pulsing red live-dot.
   Used in the nav "live" indicator, ticker, hero eyebrow, etc.
   ------------------------------------------------------------ */
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* ------------------------------------------------------------
   Button family — primary (slate), outline (white/ink), lg size.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  font-weight: 600; font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--slate-blue);
  color: #fff;
  border-color: var(--slate-blue);
}
.btn-primary:hover {
  background: var(--slate-blue-deep);
  color: #fff;
  border-color: var(--slate-blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(61,90,122,0.30);
}

.btn-outline {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover {
  border-color: var(--ink);
  background: #fafbfc;
}

/* Soft variant — slate-blue tinted fill + slate-blue text. Less heavy
   than .btn-primary, more confident / colored than .btn-outline. */
.btn-soft {
  background: var(--slate-blue-soft);
  color: var(--slate-blue);
  border-color: rgba(45, 90, 135, 0.22);
}
.btn-soft:hover {
  background: rgba(45, 90, 135, 0.14);
  color: var(--slate-blue-deep, #1e3a5f);
  border-color: var(--slate-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(61, 90, 122, 0.22);
}

.btn-lg { font-size: 15px; padding: 14px 24px; }

/* Utility — keep a phrase on one line, no wrap inside. */
.nowrap { white-space: nowrap; }