/* ============================================================
   NivaLogic — Brand Components & Base Styles
   Requires nivalogic-tokens.css (and, for web fonts, nivalogic-fonts.css)
   imported BEFORE this file.
   Everything activates inside a `.niva-root` container so the pack
   never fights a host page's own styles.
   Version: v2.0 — 2026-07-23
   ============================================================ */

/* ---------- Base ---------- */
.niva-root {
  background:
    var(--niva-glow),
    var(--niva-gradient);
  color: var(--niva-fg);
  font-family: var(--niva-font-body);
  font-weight: var(--niva-weight-body);
  font-size: var(--niva-text-base);
  line-height: var(--niva-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.niva-theme-light.niva-root { background: var(--niva-bg); }

.niva-root ::selection { background: rgba(0, 196, 204, 0.28); color: #fff; }

.niva-root h1, .niva-root h2, .niva-root h3,
.niva-root h4, .niva-root h5, .niva-root h6 {
  font-family: var(--niva-font-display);
  font-weight: var(--niva-weight-display);
  line-height: var(--niva-leading-tight);
  letter-spacing: var(--niva-tracking-display);
  color: var(--niva-fg);
  margin: 0 0 var(--niva-space-4);
  text-wrap: balance;
  font-optical-sizing: auto;
}
.niva-root h1 { font-size: var(--niva-text-3xl); }
.niva-root h2 { font-size: var(--niva-text-3xl); }
.niva-root h3 { font-size: var(--niva-text-2xl); }
.niva-root h4 { font-size: var(--niva-text-xl); }

.niva-root p { margin: 0 0 var(--niva-space-4); }
.niva-root p:last-child { margin-bottom: 0; }

/* Links — real links only, never .niva-btn (keeps button text colours). */
.niva-root a:not(.niva-btn) {
  color: var(--niva-link);
  text-decoration: none;
  transition: color var(--niva-transition);
}
.niva-root a:not(.niva-btn):hover { color: var(--niva-link-hover); }

.niva-root :focus-visible {
  outline: 2px solid var(--niva-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.niva-root code, .niva-root pre {
  font-family: var(--niva-font-mono);
  font-size: 0.9em;
}

/* ---------- Display / impact ---------- */
.niva-display {
  font-family: var(--niva-font-display);
  font-weight: var(--niva-weight-black);
  font-size: var(--niva-text-display);
  line-height: 0.92;
  letter-spacing: var(--niva-tracking-display);
  font-optical-sizing: auto;
  text-wrap: balance;
  margin: 0;
}
.niva-display .niva-em { color: var(--niva-cyan); }

.niva-lede {
  font-size: var(--niva-text-lg);
  color: var(--niva-fg-soft);
  line-height: 1.55;
  max-width: 34ch;
}

/* ---------- Eyebrow (mono, brass tick) ---------- */
.niva-eyebrow {
  font-family: var(--niva-font-mono);
  font-weight: var(--niva-weight-medium);
  font-size: var(--niva-text-xs);
  letter-spacing: var(--niva-tracking-mono);
  text-transform: uppercase;
  color: var(--niva-accent-soft);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.niva-eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--niva-brass);
  opacity: 0.85;
}
.niva-eyebrow .niva-idx { color: var(--niva-fg-muted); }

/* ---------- Utility text ---------- */
.niva-muted   { color: var(--niva-fg-muted); }
.niva-soft    { color: var(--niva-fg-soft); }
.niva-accent  { color: var(--niva-accent-soft); }
.niva-brass   { color: var(--niva-premium-soft); }
.niva-mono    { font-family: var(--niva-font-mono); }
.niva-serif-italic {
  font-family: var(--niva-font-display);
  font-style: italic;
  font-weight: 400;
}

/* ---------- Brass corner-bracket frame (echoes the logo mark) ---------- */
.niva-frame { position: relative; }
.niva-frame::before,
.niva-frame::after {
  content: ""; position: absolute; width: 46px; height: 46px; pointer-events: none;
}
.niva-frame::before {
  top: -14px; left: -14px;
  border-top: 2px solid var(--niva-brass);
  border-left: 2px solid var(--niva-brass);
}
.niva-frame::after {
  bottom: -14px; right: -14px;
  border-bottom: 2px solid var(--niva-brass);
  border-right: 2px solid var(--niva-brass);
}

/* ---------- Buttons (squared) ---------- */
.niva-btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--niva-font-mono);
  font-weight: var(--niva-weight-medium);
  font-size: var(--niva-text-sm);
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.92em 1.5em;
  color: var(--niva-fg);
  text-decoration: none;
  border-radius: var(--niva-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--niva-transition), background var(--niva-transition),
              color var(--niva-transition), border-color var(--niva-transition);
}
.niva-btn:hover { transform: translateY(-2px); }
.niva-btn .niva-arw { transition: transform var(--niva-transition); }
.niva-btn:hover .niva-arw { transform: translateX(3px); }

.niva-btn--primary       { background: var(--niva-cyan); color: #04222B; }
.niva-btn--primary:hover  { background: var(--niva-cyan-soft); color: #04222B; }

.niva-btn--premium       { background: var(--niva-brass); color: var(--niva-ink); }
.niva-btn--premium:hover  { background: var(--niva-brass-soft); color: var(--niva-ink); }

.niva-btn--ghost         { background: transparent; color: var(--niva-fg); border-color: var(--niva-border-strong); }
.niva-btn--ghost:hover    { border-color: var(--niva-cyan); color: var(--niva-cyan-soft); }

/* ---------- Card ---------- */
.niva-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 49, 92, 0.28), rgba(16, 38, 74, 0.12));
  border: 1px solid var(--niva-border);
  border-radius: var(--niva-radius);
  padding: var(--niva-space-6) var(--niva-space-5);
  transition: border-color var(--niva-transition), transform var(--niva-transition);
}
.niva-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 34px;
  background: var(--niva-brass);
  transition: width 0.3s var(--niva-ease);
}
.niva-card:hover { border-color: var(--niva-border-strong); transform: translateY(-3px); }
.niva-card:hover::before { width: 100%; }
.niva-card .niva-card-idx {
  font-family: var(--niva-font-mono);
  font-size: var(--niva-text-xs);
  letter-spacing: 0.14em;
  color: var(--niva-fg-muted);
}
.niva-card h3 { color: var(--niva-fg); margin: var(--niva-space-4) 0 var(--niva-space-3); }
.niva-theme-light .niva-card {
  background: var(--niva-surface);
  box-shadow: var(--niva-shadow);
}

/* ---------- Tags / status ---------- */
.niva-tag {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--niva-font-mono);
  font-size: var(--niva-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: var(--niva-radius-sm);
  border: 1px solid var(--niva-border-strong);
  color: var(--niva-fg-muted);
}
.niva-tag--ongoing { color: var(--niva-brass-soft); border-color: rgba(231, 194, 94, 0.4); }
.niva-tag--oneoff  { color: var(--niva-cyan-soft); border-color: rgba(99, 225, 230, 0.4); }
.niva-tag--accent  { background: var(--niva-cyan); color: var(--niva-ink); border-color: transparent; }

/* Tags on the cream/light theme — the pale on-dark inks wash out on cream,
   so switch to darker inks over a faint tinted fill for legible contrast. */
.niva-theme-light .niva-tag {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(11, 29, 58, 0.16);
  color: var(--niva-fg-soft);
}
.niva-theme-light .niva-tag--ongoing { color: #8A6A0C; background: rgba(212, 160, 23, 0.10); border-color: rgba(138, 106, 12, 0.35); }
.niva-theme-light .niva-tag--oneoff  { color: #0E7C82; background: rgba(0, 196, 204, 0.10); border-color: rgba(14, 124, 130, 0.35); }
.niva-theme-light .niva-tag--accent  { color: #04222B; background: var(--niva-cyan); border-color: transparent; }

/* Live status dot — pill-shaped node with a single pulse */
.niva-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--niva-cyan);
  box-shadow: 0 0 0 0 rgba(0, 196, 204, 0.55);
  animation: niva-pulse 3.4s ease-out infinite;
}
@keyframes niva-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 196, 204, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 196, 204, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 196, 204, 0); }
}

/* ---------- Rule / divider ---------- */
.niva-rule { height: 1px; border: 0; background: var(--niva-border); margin: var(--niva-space-6) 0; }
.niva-rule--brass { height: 2px; background: var(--niva-brass); opacity: 0.85; }

/* ============================================================
   SIGNATURE — The Translation Line
   Board question (serif) ⟷ engineering expression (mono),
   meeting at a cyan node on a brass hairline.
   Markup:
   <div class="niva-tl-row">
     <div class="niva-tl-room niva-tl-q"><span class="niva-tl-label">The boardroom asks</span>
       <span class="niva-tl-text">"Should we build this, or buy it?"</span></div>
     <div class="niva-tl-node" aria-hidden="true"></div>
     <div class="niva-tl-room niva-tl-a"><span class="niva-tl-label">Engineering hears</span>
       <span class="niva-tl-code"><span class="niva-fn">build_vs_buy</span>(<span class="niva-arg">npv</span>)</span></div>
   </div>
   Add class `niva-in` (e.g. via IntersectionObserver) to play the connect animation.
   ============================================================ */
.niva-tl-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.6rem, 3.4vw, 2.7rem) 0;
  border-bottom: 1px solid var(--niva-border);
}
.niva-tl-room {
  opacity: 0;
  transform: translateX(var(--niva-from, 0));
  transition: opacity 0.7s ease, transform 0.7s var(--niva-ease);
}
.niva-tl-row.niva-in .niva-tl-room { opacity: 1; transform: translateX(0); }
.niva-tl-q { --niva-from: -26px; text-align: right; }
.niva-tl-a { --niva-from: 26px; }
.niva-tl-label {
  font-family: var(--niva-font-mono);
  font-size: var(--niva-text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--niva-fg-muted);
  margin-bottom: 0.7em;
  display: block;
}
.niva-tl-text {
  font-family: var(--niva-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--niva-text-2xl);
  color: var(--niva-cream);
  line-height: 1.2;
}
.niva-theme-light .niva-tl-text { color: var(--niva-ink); }
.niva-tl-code {
  font-family: var(--niva-font-mono);
  font-size: clamp(0.82rem, 1.3vw, 1rem);
  color: var(--niva-cyan-soft);
  line-height: 1.7;
  word-break: break-word;
}
.niva-tl-code .niva-fn  { color: var(--niva-fg); }
.niva-tl-code .niva-arg { color: var(--niva-brass-soft); }

.niva-tl-node { justify-self: center; width: 12px; height: 12px; position: relative; }
.niva-tl-node::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--niva-cyan);
  opacity: 0; transform: scale(0.2);
  transition: opacity 0.5s ease 0.25s, transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) 0.25s;
}
.niva-tl-row.niva-in .niva-tl-node::before { opacity: 1; transform: scale(1); }
.niva-tl-node::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--niva-brass); opacity: 0;
  transition: opacity 0.5s ease 0.4s;
}
.niva-tl-row.niva-in .niva-tl-node::after { opacity: 0.55; }

@media (max-width: 720px) {
  .niva-tl-row { grid-template-columns: 1fr; gap: 0.9rem; text-align: left; }
  .niva-tl-q { text-align: left; --niva-from: -18px; }
  .niva-tl-a { --niva-from: 18px; }
  .niva-tl-node { display: none; }
  .niva-tl-q .niva-tl-text::after {
    content: ""; display: block; width: 30px; height: 1px;
    background: var(--niva-brass); margin: 0.9rem 0 0.2rem;
  }
}

/* ---------- Scroll-reveal helper ---------- */
.niva-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s var(--niva-ease); }
.niva-reveal.niva-in { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .niva-root *, .niva-btn { transition: none !important; animation: none !important; }
  .niva-reveal, .niva-tl-room { opacity: 1 !important; transform: none !important; }
  .niva-tl-node::before { opacity: 1; transform: scale(1); }
  .niva-tl-node::after { opacity: 0.55; }
}