/* ═════════════════════════════════════════════════════════════════════
   Uboros bridge.css
   Maps the legacy /static/app.css token names to the new design-system
   tokens defined in tokens.css. Loaded AFTER tokens.css + components.css
   AND AFTER app.css, so its values win.

   Why this exists: the existing markup uses var(--accent), var(--text),
   var(--border), etc. — hundreds of references across briefs.html,
   dashboard.html, setup.html. Rewriting every reference to the new
   var(--sage), var(--ink-hi), var(--rule) at once is a multi-day grind.

   By remapping the LEGACY token names to point at the DESIGN-SYSTEM
   tokens, every existing component inherits the new palette (sage
   accent, cream surfaces, etc.) on the next render with zero markup
   changes. New surfaces port to the `.u-*` classes one at a time;
   ported surfaces stop relying on the legacy names; eventually this
   bridge gets retired.

   Scoped to [data-theme] so dark mode (when wired) also flips the
   bridge values automatically.
   ═════════════════════════════════════════════════════════════════════ */

[data-theme] {
  /* Surfaces: --bg / --surface / --surface-2 / --surface-3 are already
     set per theme in tokens.css; the legacy app.css names match exactly,
     so the design-system values win automatically without remapping. */

  /* Ink → text */
  --text:         var(--ink-hi);
  --text-2:       var(--ink-md);
  --text-3:       var(--ink-lo);

  /* Accent → sage (the loop colour) */
  --accent:       var(--sage);
  --accent-light: var(--sage);
  --accent-glow:  color-mix(in srgb, var(--sage) 24%, transparent);
  --accent-bg:    var(--sage-soft);

  /* Borders → rule */
  --border:        var(--rule);
  --border-strong: var(--rule-strong);

  /* Semantic colors: --warn / --danger already defined in tokens.css under
     [data-theme="light"|"dark"], so legacy markup using them just works.
     We only need to remap the *-bg variants because legacy used those
     names. */
  --warn-bg:   var(--warn-soft);
  --danger-bg: var(--danger-soft);

  /* Layout */
  --max-width: 1200px;
  --gutter:    clamp(20px, 4vw, 48px);
  --radius:    var(--radius-lg);
  --radius-sm: var(--radius-md);
}

/* ────────────────────────────────────────────────────────────────────
   Legacy component nudges — light retouches that make the existing
   .btn / .pill / .card / .conn-chip / .field aesthetics align with the
   design system without rebuilding them from scratch.

   Anything inside this block is a transitional override — when we port
   a page to .u-* components, we delete the corresponding nudges here.
   ──────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  color: var(--ink-hi);
  background: var(--bg);
}

/* Display headings — pull from Bricolage so page titles get the
   serif-y geometric character the brand calls for. */
h1, h2, .page-title h1 {
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
  font-weight: var(--weight-medium);
}

/* Buttons: re-skin the legacy .btn so it visually matches .u-btn */
.btn {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:not(.ghost) {
  background: var(--ink-hi);
  color: var(--ink-inverse);
  border-color: var(--ink-hi);
}
.btn:not(.ghost):hover { opacity: 0.92; }
.btn.ghost {
  background: var(--surface);
  color: var(--ink-md);
  border-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
.btn.ghost:hover {
  color: var(--ink-hi);
  border-color: var(--rule-strong);
}
.btn.sm { font-size: var(--type-caption); }

/* Pills — replace the loud green with sage-soft for connected, sand
   for warn, danger-soft for danger. Better visual hierarchy on a feed
   that's mostly informational. */
.pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface-2);
  color: var(--ink-md);
  border: 1px solid var(--rule);
}
.pill.connected, .pill.ok {
  background: var(--sage-soft);
  color: var(--sage);
  border-color: var(--sage-soft-2);
}
.pill.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.pill.danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.pill.info {
  background: var(--surface-2);
  color: var(--ink-md);
  border-color: var(--rule);
}
.pill .dot { background: currentColor; }

/* Cards — soften shadow, raise radius to match design system */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* Form fields — match the .u-input visual */
.field label {
  font-size: var(--type-caption);
  color: var(--ink-lo);
  font-weight: var(--weight-medium);
}
.field input,
.field textarea,
.field select,
input[type='text'],
input[type='url'],
input[type='email'],
input[type='password'],
input[type='number'],
textarea,
select {
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--sage-soft);
  outline: none;
}

/* Header: refine the topbar a touch — sticky + blurred, more refined */
header {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
header .brand {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-tight);
}
nav.main a {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--ink-md);
}
nav.main a:hover { color: var(--ink-hi); }

/* The brand-dot stays — but tint to sage so the loop colour shows up
   in the topbar too. */
header .brand-dot {
  background: var(--sage);
}

/* Subtitle / hint copy — anchor to ink-md */
.subtitle, .hint {
  color: var(--ink-md);
}

/* Stage-section retouch — used heavily on /dashboard. Promote the title
   to display font, soften the surface to design-system shadows, and make
   the numbered circle feel like the .u-card-head__num chip. The legacy
   markup keeps working; this just visually aligns it with the rest of
   the system without rewriting every stage. */
.stage-section {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius, var(--radius-xl));
  box-shadow: var(--shadow-md);
  padding: 24px 24px 22px;
}
/* Stage-head row — number chip + title + segment tag, all on ONE line,
   sharing a single optical baseline. Heights are explicit so flex
   center-alignment produces consistent vertical positioning across
   Bricolage (title), Geist Mono (num + tag), regardless of each
   font's natural half-leading. Font-size gradient is intentionally
   gentle (18 → 13 → 12) so neighbouring elements feel related. */
.stage-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: nowrap;
  min-height: 28px;
}
.stage-head .num {
  width: 28px;
  height: 28px;
  background: var(--sage-soft);
  border: 1.5px solid var(--sage-soft-2);
  color: var(--sage);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  line-height: 1;
}
.stage-head .title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--track-snug);
  /* Optical alignment: Bricolage's optical center sits ~1px below
     its geometric center, so nudge up half a pixel to land flush
     with the .num circle's center. */
  transform: translateY(-0.5px);
}
.stage-head .seg-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--track-mono);
  color: var(--ink-lo);
  margin-left: auto;
  white-space: nowrap;
}
.stage-head .seg-tag.preparation { color: var(--sage); }
.stage-head .seg-tag.performance { color: var(--sand-ink); }
.stage-body { color: var(--ink-md); }

/* Stage 1 layout breakpoint — the 1/1/1.6 column ratios work well on
   wide screens but become unreadable below ~720px. Collapse to a
   single column there so each section has full width to breathe. */
@media (max-width: 720px) {
  .stage-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Legacy .page-title (used everywhere except where we've ported to
   .u-pagehead). Upgrade the h1 to Bricolage display so non-ported
   pages still feel design-system. */
.page-title h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--page-title-size, 42px);
  letter-spacing: var(--track-tight);
  line-height: 1.05;
}
.page-title .subtitle {
  font-size: var(--page-sub-size, 14px);
  color: var(--ink-md);
  margin-top: 6px;
  max-width: 60ch;
}

/* The dashboard's "conn-bar" connection-status strip — a sticky row of
   chips. Soften it to design-system surfaces so it stops looking like
   a leftover from the old theme. */
.conn-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.conn-bar .label {
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  color: var(--ink-lo);
}
.conn-chip {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink-md);
  border-radius: var(--radius-pill);
}
.conn-chip.connected, .conn-chip.ok {
  background: var(--sage-soft);
  border-color: var(--sage-soft-2);
  color: var(--sage);
}
.conn-chip.warn {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: var(--warn);
}
.conn-chip.danger {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}