/* ============================================================
   invizi · core design system
   tokens + base styles + cross-page utilities
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --bg:        oklch(0.145 0.006 250);
  --bg-1:      oklch(0.175 0.006 250);
  --bg-2:      oklch(0.205 0.006 250);
  --bg-hover:  oklch(0.225 0.007 250);

  /* ---- lines ---- */
  --line:      oklch(0.28  0.006 250);
  --line-soft: oklch(0.235 0.006 250);

  /* ---- ink ---- */
  --ink:       oklch(0.955 0.004 250);
  --ink-2:     oklch(0.78  0.006 250);
  --ink-3:     oklch(0.62  0.006 250);
  --ink-4:     oklch(0.52  0.006 250);

  /* ---- brand cyan · tonal hierarchy ----
     pure brand   → logo dot, status pulses (purest, most saturated)
     deep         → solid primary CTA bg (slightly darker, more chroma)
     soft / line  → ghost backgrounds and borders (translucent)
  */
  --accent:            oklch(0.78 0.09 195);
  --accent-soft:       oklch(0.78 0.09 195 / 0.12);
  --accent-soft-hover: oklch(0.78 0.09 195 / 0.20);
  --accent-line:       oklch(0.78 0.09 195 / 0.35);
  --accent-deep:       oklch(0.70 0.14 195);
  --accent-deep-hover: oklch(0.76 0.14 195);
  --ink-on-accent:     var(--bg);

  /* ---- semantic status ---- */
  --pass:      oklch(0.80 0.14 155);
  --pass-soft: oklch(0.80 0.14 155 / 0.12);
  --miss:      oklch(0.70 0.17 22);
  --miss-soft: oklch(0.70 0.17 22 / 0.12);
  --warn:      oklch(0.82 0.13 75);
  --warn-soft: oklch(0.82 0.13 75 / 0.12);

  /* ---- type ---- */
  --sans:    "Switzer", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Supreme", "Switzer", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- radius ---- */
  --r:    4px;
  --r-lg: 6px;
}

/* ---- reset ---- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
button { font-family: inherit; }
button, input, textarea { color: inherit; }
input, textarea { font-family: inherit; }
::selection { background: var(--accent-soft); color: var(--ink); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--accent-line); }

/* ---- utilities ---- */
.mono { font-family: var(--mono); font-feature-settings: "zero" 1, "ss02" 1; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- focus + scrollbar ---- */
:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: 3px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(0.3 0.006 250); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: oklch(0.4 0.006 250); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); font-size: 12.5px;
  border-radius: var(--r); cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--bg-hover); border-color: oklch(0.34 0.006 250); }
.btn.ghost { background: transparent; }
.btn.sm { height: 24px; font-size: 12px; padding: 0 8px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* primary — solid deeper cyan, dark ink on top
   (brand cyan stays reserved for the wordmark dot) */
.btn.primary {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--ink-on-accent);
  font-weight: 500;
}
.btn.primary:hover {
  background: var(--accent-deep-hover);
  border-color: var(--accent-deep-hover);
}

/* ghost-cyan variant — for secondary calls-to-action */
.btn.accent-ghost {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
.btn.accent-ghost:hover {
  background: var(--accent-soft-hover);
}

/* ---- status dots + animations ---- */
.dot-status { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-status.pass { background: var(--pass); box-shadow: 0 0 0 3px var(--pass-soft); }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 var(--pass-soft); }
  50%      { box-shadow: 0 0 0 5px oklch(0.80 0.14 155 / 0.18); }
}
.live-dot { animation: pulse-dot 2.2s ease-in-out infinite; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up .4s ease both; }

/* ---- code block ---- */
.code-block {
  background: var(--bg-1);
  border-radius: var(--r);
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}
/* monochrome by default; subtle differentiation via weight + ink tier */
.code-kw    { color: var(--ink);   font-weight: 500; }
.code-field { color: var(--ink); }
.code-num   { color: var(--ink-2); }
.code-str   { color: var(--ink-2); }