/* gitops-docgen UI design system — Stripe-ish clean SaaS */

:root {
  /* Neutrals — cool slate */
  --bg: #ffffff;
  --bg-soft: #fafbfc;
  --bg-sunken: #f5f6f8;
  --bg-hover: #f0f2f5;
  --border: #e5e8ec;
  --border-strong: #d4d9df;
  --ink: #0f1419;
  --ink-muted: #4a5260;
  --ink-subtle: #7a8494;
  --ink-faint: #b0b8c4;

  /* Single-chroma accents (oklch) */
  --accent: oklch(0.58 0.14 255);          /* indigo */
  --accent-soft: oklch(0.96 0.02 255);
  --accent-ink: oklch(0.42 0.14 255);

  --ok: oklch(0.62 0.14 150);
  --ok-soft: oklch(0.96 0.03 150);

  --warn: oklch(0.72 0.14 75);
  --warn-soft: oklch(0.97 0.04 75);

  --danger: oklch(0.6 0.19 25);
  --danger-soft: oklch(0.97 0.03 25);

  --computed: oklch(0.58 0.14 300);        /* purple — computed/resolved */
  --computed-soft: oklch(0.97 0.03 300);

  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04), 0 1px 3px rgba(15, 20, 25, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 20, 25, 0.06), 0 1px 3px rgba(15, 20, 25, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 20, 25, 0.08), 0 2px 6px rgba(15, 20, 25, 0.04);

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", ui-monospace, monospace;
  --font-display: "Inter", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
}

/* ─────────── Reusable primitives ─────────── */

.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.topbar {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--ink);
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--ink-faint); }
.crumb .now { color: var(--ink); font-weight: 500; }

.spacer { flex: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); }
.btn-primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.btn-primary:hover { background: #222933; }
.btn-ok {
  background: var(--ok);
  color: white;
  border-color: var(--ok);
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover { background: var(--bg-hover); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  background: var(--bg-sunken);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.badge-ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.badge-warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.badge-danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.badge-accent { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }
.badge-computed { color: var(--computed); background: var(--computed-soft); border-color: transparent; }

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
}

/* ─────────── PDF surfaces (placeholder renderings) ─────────── */
.pdf-surface {
  background: #fefefe;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  aspect-ratio: 8.5 / 11;
  position: relative;
  overflow: hidden;
  font-family: "Times New Roman", Times, serif;
  color: #111;
}

/* ─────────── Tables ─────────── */
.list-row {
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 80ms ease;
}
.list-row:hover { background: var(--bg-soft); }
.list-row.active { background: var(--accent-soft); }

/* ─────────── Mono blocks ─────────── */
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
}

/* YAML syntax (hand-rolled) */
.yk { color: #7a3e9d; }           /* key */
.ys { color: #1e5a3a; }           /* string */
.yn { color: #b45309; }           /* number */
.yc { color: var(--ink-subtle); font-style: italic; }  /* comment */
.yd { color: var(--ink-subtle); }
.yp { color: var(--computed); }   /* placeholder */