/* ============================================================================
   loopy-ui.css: the shared Loopy design system.

   Single source of truth for the visual language used by the marketing site
   (loopy-landing) and the control-plane dashboard (loopy_runtime/dashboard).
   It is two things:

     1. The :root token contract: colors, type, spacing, elevation. These match
        the landing page exactly, so anything that consumes the tokens inherits
        the same look.
     2. A small set of opt-in primitives, all namespaced `lui-` so they never
        collide with a host page's own classes.

   The dashboard vendors a byte-for-byte copy of this file. Keep the two in sync.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── surfaces & ink ───────────────────────────────────────────────── */
  --bg:        #fbfbfb;   /* page background */
  --panel:     #ffffff;   /* card / panel background */
  --ink:       #18181b;   /* primary text (near-black) */
  --muted:     #5b5b63;   /* secondary text */
  --faint:     #8e8e96;   /* tertiary text / hints */
  --line:      #e8e8ea;   /* hairline border */
  --line-2:    #d6d6da;   /* interactive / stronger border */

  /* ── accent ───────────────────────────────────────────────────────── */
  --accent:    #2563eb;   /* blue accent */
  --accent-2:  #1d4ed8;   /* darker blue, code keywords */
  --accent-sb: rgba(37,99,235,0.16);  /* accent at selection/soft fill */

  /* ── status (runs, schedules, health) ─────────────────────────────── */
  --ok:        #15803d;   /* completed / healthy (green) */
  --ok-bg:     #ecfdf3;
  --warn:      #b45309;   /* running / pending (amber) */
  --warn-bg:   #fef6e7;
  --bad:       #b42318;   /* failed (red) */
  --bad-bg:    #fef3f2;

  /* ── code / terminal ──────────────────────────────────────────────── */
  --code-bg:   #f6f6f7;
  --term-bg:   #161c25;   /* dark terminal panel */
  --term-bar:  #1d2531;
  --term-line: #0c1016;
  --term-ink:  #cdd4de;

  /* ── elevation ────────────────────────────────────────────────────── */
  --elev:   0 1px 2px rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,0.03);
  --elev-2: 0 6px 16px rgba(0,0,0,0.08);

  /* ── radii ────────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 11px;
  --r-pill: 999px;

  /* ── type ─────────────────────────────────────────────────────────── */
  --sans: "Avenir Next", "Avenir", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

::selection { background: var(--accent-sb); }

/* JetBrains Mono ships coding ligatures in its "calt" feature that merge
   operator pairs: != renders as a single not-equal glyph, -> as an arrow.
   Code samples must show the literal characters, so disable the
   substitutions everywhere the mono stack renders code. */
pre, code, kbd, samp, .lui-mono {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

/* ============================================================================
   Primitives (opt-in, `lui-` namespaced)
   ========================================================================== */

/* layout -------------------------------------------------------------- */
.lui-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.lui-mono { font-family: var(--mono); }
.lui-faint { color: var(--faint); }
.lui-muted { color: var(--muted); }

/* card ---------------------------------------------------------------- */
.lui-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--elev);
}
.lui-card.is-hover {
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lui-card.is-hover:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

/* section heading ----------------------------------------------------- */
.lui-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--accent);
  text-transform: lowercase;
}

/* button -------------------------------------------------------------- */
.lui-btn {
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--line-2);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--panel);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.lui-btn:hover { border-color: var(--ink); }
.lui-btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* badge: status pill -------------------------------------------------- */
.lui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.4;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--muted);
  background: var(--panel);
  white-space: nowrap;
}
.lui-badge.is-ok       { color: var(--ok);   border-color: rgba(21,128,61,0.30);  background: var(--ok-bg); }
.lui-badge.is-running  { color: var(--warn); border-color: rgba(180,83,9,0.30);   background: var(--warn-bg); }
.lui-badge.is-bad      { color: var(--bad);  border-color: rgba(180,35,24,0.30);  background: var(--bad-bg); }
.lui-badge.is-accent   { color: var(--accent); border-color: rgba(37,99,235,0.30); }

/* chip: neutral tag --------------------------------------------------- */
.lui-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--accent-2);
  background: var(--code-bg);
  white-space: nowrap;
}

/* status dot ---------------------------------------------------------- */
.lui-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; background: var(--faint); flex: none;
}
.lui-dot.is-ok      { background: var(--ok);  box-shadow: 0 0 0 3px var(--ok-bg); }
.lui-dot.is-running { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.lui-dot.is-bad     { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.lui-dot.is-accent  { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-sb); }

/* code block ---------------------------------------------------------- */
.lui-code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0;
  color: var(--ink);
}

/* tabs ---------------------------------------------------------------- */
.lui-tab {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 11px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.lui-tab:hover { color: var(--ink); }
.lui-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }