/* Product surfaces (/path, mirror, /connectors) — Helvetica Neue lab voice.
   Load after me-app / flagship so it wins over Mona Sans + mono UI defaults. */

body.cosmos-app {
  font-family: var(--font-lab-display, "Helvetica Neue", Helvetica, system-ui, sans-serif);
  font-weight: 400;
  font-variation-settings: normal;
}

body.cosmos-app nav.site-nav .word,
body.cosmos-app nav.site-nav .right,
body.cosmos-app nav.site-nav .nav-right,
body.cosmos-app nav.cosmos-nav .word,
body.cosmos-app nav.cosmos-nav .right {
  font-family: var(--font-lab-display, "Helvetica Neue", Helvetica, system-ui, sans-serif);
  font-weight: 500;
  font-variation-settings: normal;
}

body.cosmos-app.mirror-active .path-title,
body.cosmos-app.connect-active .path-title,
body.cosmos-app .path-title.lab-title,
body.cosmos-app .path-title {
  font-family: var(--font-lab-display, "Helvetica Neue", Helvetica, system-ui, sans-serif);
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-variation-settings: normal;
}

body.cosmos-app :is(
  .path-sub,
  .section-copy,
  .section-blurb,
  .card-body,
  .future-body,
  .saved-label,
  .empty-state p,
  .path-evidence ul,
  .toast,
  .agent-paste-toast,
  .tile-title,
  .tile-copy,
  .tile-name,
  .modal h3,
  .modal .body-line,
  .section-head h2,
  .path-card h2,
  .future-card h3,
  .mirror-door h2,
  .me-hero-title,
  .me-hero-lede,
  .me-pulse-title,
  .me-pulse-copy,
  .me-next-title,
  .me-next-copy,
  .me-notice,
  .connect-blurb,
  .lab-trail
) {
  font-family: var(--font-lab-display, "Helvetica Neue", Helvetica, system-ui, sans-serif);
}

body.cosmos-app :is(
  .path-card h2,
  .future-card h3,
  .section-head h2,
  .mirror-door h2,
  .me-hero-title,
  .me-pulse-title,
  .me-next-title,
  .tile-name,
  .modal h3
) {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

body.cosmos-app :is(
  .path-kicker,
  .section-label,
  .card-kicker,
  .future-frame,
  .saved-meta,
  .empty-label,
  .connect-stats,
  .action,
  .path-link,
  .inline-retry,
  .status-pill,
  .future-badge,
  .loading,
  .path-evidence summary,
  .mirror-depth-summary,
  .me-loop-nudge,
  .ds-marker,
  .me-pulse-kicker,
  .me-next-kicker,
  .tile-kicker,
  .btn,
  .toggle,
  .coming-soon,
  .modal label,
  .modal .meta-line,
  .err-line,
  .lab-trail,
  .nango-tile-status
) {
  font-family: var(--font-lab-display, "Helvetica Neue", Helvetica, system-ui, sans-serif);
  font-weight: 500;
  font-variation-settings: normal;
}

body.cosmos-app :is(a.path-link, button.path-link, .action, .btn) {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

body.cosmos-app :is(pre, code, textarea, .font-mono, .tile-meta, .tile-row-meta, .access-code) {
  font-family: var(--font-meta, "JetBrains Mono", ui-monospace, Menlo, monospace);
}

/* Mirror + futures readout */
body.cosmos-app.mirror-active :is(
  .me-hero-heading,
  .me-hero-kicker,
  .me-hero-prose,
  .me-hero-drift,
  .mnx-title,
  .mnx-body,
  .me-teaser-body,
  .mn-body,
  .me-path-futures-items,
  .chip,
  .me-pulse-chip
) {
  font-family: var(--font-lab-display, "Helvetica Neue", Helvetica, system-ui, sans-serif);
  font-variation-settings: normal;
}

body.cosmos-app.mirror-active .chip,
body.cosmos-app.mirror-active .me-pulse-chip {
  font-weight: 400;
}

body.cosmos-app.mirror-active :is(.me-hero-heading, .mnx-title) {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

body.cosmos-app.mirror-active :is(
  .me-hero-status,
  .me-hero-link,
  .mnx-kicker,
  .mnx-dismiss,
  .mnx-secondary,
  .mnx-cta,
  .mn-label,
  .me-path-futures-label,
  .me-pulse-stale-hint,
  .me-wiring-chip
) {
  font-family: var(--font-lab-display, "Helvetica Neue", Helvetica, system-ui, sans-serif);
}

body.cosmos-app.mirror-active .me-hero-prose,
body.cosmos-app.mirror-active .me-hero-drift,
body.cosmos-app.mirror-active .mnx-body {
  font-weight: 400;
}

/* Status accents — kind-observed (mint) + kind-self (sand) */
body.cosmos-app .status-pill.is-ok,
body.cosmos-app .future-badge.saved {
  color: var(--status-ok);
  border-color: color-mix(in oklab, var(--status-ok) 30%, transparent);
}

body.cosmos-app .status-pill.is-warn,
body.cosmos-app .future-badge.aim {
  color: var(--status-warn);
  border-color: color-mix(in oklab, var(--status-warn) 28%, transparent);
}

body.cosmos-app :is(.path-link.primary, .action.primary) {
  color: var(--status-ok);
  border-color: color-mix(in oklab, var(--status-ok) 34%, transparent);
  background: color-mix(in oklab, var(--status-ok) 5.5%, transparent);
}

body.cosmos-app :is(.path-link.primary, .action.primary):hover,
body.cosmos-app :is(.path-link.primary, .action.primary):focus-visible {
  color: var(--status-ok);
}

body.cosmos-app .path-card.is-momentum,
body.cosmos-app .path-card.is-mirror.is-momentum {
  border-color: color-mix(in oklab, var(--status-ok) 19%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--status-ok) 4.5%, transparent),
    rgba(8, 9, 12, 0.72)
  );
}

body.cosmos-app .path-card.is-aim,
body.cosmos-app .path-card.is-mirror.is-aim {
  border-color: color-mix(in oklab, var(--status-warn) 17%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--status-warn) 4%, transparent),
    rgba(8, 9, 12, 0.72)
  );
}

body.cosmos-app .action.aim {
  color: var(--status-warn);
  border-color: color-mix(in oklab, var(--status-warn) 30%, transparent);
  background: color-mix(in oklab, var(--status-warn) 4.5%, transparent);
}