/* ==========================================================================
   Vaporkernel Design System — colors_and_type.css
   "The Engineering Blueprint" — light-first, schematic, mono-forward.
   Source of truth for tokens. Import this in any vaporkernel surface.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  /* --------------------------------------------------------------------------
     PALETTE — Warm paper canvas, ink-black, phosphor-cyan signal.
     Inspired by drafting paper + engineering blueprints + the kernel terminal.
     -------------------------------------------------------------------------- */

  /* Canvas — warm light, never sterile white */
  --vk-paper:          #f4f2eb;   /* primary surface — drafting paper */
  --vk-paper-hi:       #fbfaf6;   /* lifted card */
  --vk-paper-low:      #ecead9;   /* recessed: code, inputs */
  --vk-paper-trough:   #e3e0cd;   /* deep recess */
  --vk-rule:           #d6d2bf;   /* hairline borders */
  --vk-rule-hi:        #b8b3a0;   /* emphasized borders */

  /* Ink */
  --vk-ink:            #0e1014;   /* primary text — near-black, slight blue */
  --vk-ink-mid:        #4a4f57;   /* secondary text */
  --vk-ink-low:        #777b80;   /* metadata, captions */
  --vk-ink-faint:      #aeb0ad;   /* disabled */

  /* Dark mirror (secondary surface, for terminal/code regions) */
  --vk-void:           #0a0b0d;
  --vk-canvas-dk:      #0e1014;
  --vk-panel-dk:       #14171c;
  --vk-rule-dk:        #1f242c;
  --vk-ink-on-dk:      #e8eaed;
  --vk-ink-mid-dk:     #a8adb5;

  /* Signal — phosphor cyan. Reads on light AND dark. */
  --vk-signal:         #128a6b;   /* deep teal — primary on light */
  --vk-signal-hi:      #0e6e55;   /* hover, deeper */
  --vk-signal-bright:  #4cf2c4;   /* THE phosphor — used on dark surfaces */
  --vk-signal-faint:   rgba(18, 138, 107, 0.10);
  --vk-signal-soft:    rgba(18, 138, 107, 0.18);

  /* Accent — warm amber, the hardware/provider voice */
  --vk-amber:          #b67944;
  --vk-amber-bright:   #f0a868;

  /* Status semantics */
  --vk-ok:             var(--vk-signal);
  --vk-warn:           var(--vk-amber);
  --vk-err:            #c4423a;
  --vk-info:           #3b6ec7;

  /* Tier colors */
  --vk-tier-bronze:    #b87a4a;
  --vk-tier-silver:    #8a8f97;
  --vk-tier-gold:      #c89a3a;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     • DM Mono — display + UI labels + code (the brand voice)
     • Bricolage Grotesque — long-form body, dense data
     • Bricolage Grotesque — editorial italic emphasis (sparingly)
     -------------------------------------------------------------------------- */

  --vk-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --vk-font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vk-font-serif:   'IBM Plex Serif', 'Times New Roman', Georgia, serif;

  --vk-text-xs:      0.75rem;
  --vk-text-sm:      0.8125rem;
  --vk-text-base:    0.9375rem;
  --vk-text-md:      1.0625rem;
  --vk-text-lg:      1.375rem;
  --vk-text-xl:      1.875rem;
  --vk-text-2xl:     2.5rem;
  --vk-text-3xl:     3.5rem;
  --vk-text-4xl:     5rem;
  --vk-text-5xl:     7rem;

  --vk-track-tight:  -0.04em;
  --vk-track-snug:   -0.02em;
  --vk-track-base:    0;
  --vk-track-wide:    0.04em;
  --vk-track-mono:    0.08em;

  --vk-lead-tight:   1.0;
  --vk-lead-snug:    1.15;
  --vk-lead-base:    1.45;
  --vk-lead-loose:   1.65;

  /* Spacing — 4px base */
  --vk-1:   0.25rem;
  --vk-2:   0.5rem;
  --vk-3:   0.75rem;
  --vk-4:   1rem;
  --vk-5:   1.5rem;
  --vk-6:   2rem;
  --vk-7:   2.75rem;
  --vk-8:   3.5rem;
  --vk-9:   4.5rem;
  --vk-10:  6rem;
  --vk-11:  8rem;
  --vk-12: 10rem;

  /* Radii — restrained */
  --vk-r-0:    0;
  --vk-r-sm:   3px;
  --vk-r-md:   6px;
  --vk-r-lg:   10px;
  --vk-r-xl:   14px;
  --vk-r-pill: 999px;

  /* Elevation — schematic ink, not drop shadow */
  --vk-shadow-sm:  0 0 0 1px var(--vk-rule), 0 1px 2px rgba(14,16,20,0.04);
  --vk-shadow-md:  0 0 0 1px var(--vk-rule), 0 8px 24px rgba(14,16,20,0.06);
  --vk-shadow-lg:  0 0 0 1px var(--vk-rule-hi), 0 24px 48px rgba(14,16,20,0.10);
  --vk-glow-signal: 0 0 0 1px rgba(18,138,107,0.4), 0 6px 18px rgba(18,138,107,0.15);

  /* Motion */
  --vk-dur-instant: 80ms;
  --vk-dur-fast:    140ms;
  --vk-dur-base:    220ms;
  --vk-dur-slow:    420ms;
  --vk-ease:        cubic-bezier(0.2, 0, 0, 1);
  --vk-ease-step:   steps(8, end);

  /* Layout */
  --vk-max:        1280px;
  --vk-gutter:     var(--vk-5);
  --vk-rail:       72px;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body.vaporkernel,
.vaporkernel {
  font-family: var(--vk-font-sans);
  font-size: var(--vk-text-base);
  line-height: var(--vk-lead-base);
  color: var(--vk-ink);
  background: var(--vk-paper);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--vk-track-snug);
}

.vaporkernel.dark {
  color: var(--vk-ink-on-dk);
  background: var(--vk-void);
}

.vaporkernel ::selection {
  background: var(--vk-signal-soft);
  color: var(--vk-signal-hi);
}

/* ==========================================================================
   TYPE — semantic classes
   ========================================================================== */

.vk-display {
  font-family: var(--vk-font-mono);
  font-weight: 500;
  font-size: clamp(var(--vk-text-3xl), 8vw, var(--vk-text-5xl));
  line-height: 0.95;
  letter-spacing: var(--vk-track-tight);
  color: var(--vk-ink);
}

.vk-h1 {
  font-family: var(--vk-font-mono);
  font-weight: 500;
  font-size: clamp(var(--vk-text-2xl), 5vw, var(--vk-text-4xl));
  line-height: 1.0;
  letter-spacing: var(--vk-track-tight);
}

.vk-h2 {
  font-family: var(--vk-font-mono);
  font-weight: 500;
  font-size: var(--vk-text-2xl);
  line-height: 1.05;
  letter-spacing: var(--vk-track-tight);
}

.vk-h3 {
  font-family: var(--vk-font-mono);
  font-weight: 500;
  font-size: var(--vk-text-xl);
  line-height: 1.15;
  letter-spacing: var(--vk-track-snug);
}

.vk-h4 {
  font-family: var(--vk-font-sans);
  font-weight: 600;
  font-size: var(--vk-text-lg);
  line-height: 1.2;
  letter-spacing: var(--vk-track-snug);
}

.vk-eyebrow {
  font-family: var(--vk-font-mono);
  font-weight: 500;
  font-size: var(--vk-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--vk-track-mono);
  color: var(--vk-ink-low);
  display: inline-flex;
  align-items: center;
  gap: var(--vk-2);
}
.vk-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--vk-signal);
}

.vk-lede {
  font-family: var(--vk-font-sans);
  font-size: var(--vk-text-md);
  line-height: var(--vk-lead-base);
  color: var(--vk-ink-mid);
  max-width: 60ch;
  letter-spacing: var(--vk-track-snug);
}

.vk-body {
  font-family: var(--vk-font-sans);
  font-size: var(--vk-text-base);
  line-height: var(--vk-lead-base);
  color: var(--vk-ink-mid);
  max-width: 64ch;
}

.vk-caption {
  font-family: var(--vk-font-mono);
  font-size: var(--vk-text-xs);
  color: var(--vk-ink-low);
  letter-spacing: var(--vk-track-base);
}

.vk-quote {
  font-family: var(--vk-font-serif);
  font-style: italic;
  font-size: var(--vk-text-xl);
  line-height: 1.3;
  color: var(--vk-ink);
}

.vk-mono { font-family: var(--vk-font-mono); }
.vk-num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* --- Button ---------------------------------------------------------------- */
.vk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--vk-2);
  font-family: var(--vk-font-mono);
  font-size: var(--vk-text-sm);
  font-weight: 500;
  letter-spacing: var(--vk-track-base);
  padding: 10px 18px;
  border-radius: var(--vk-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--vk-dur-fast) var(--vk-ease);
  white-space: nowrap;
  line-height: 1;
}

.vk-btn-primary {
  background: var(--vk-ink);
  color: var(--vk-paper);
  border-color: var(--vk-ink);
}
.vk-btn-primary:hover { background: var(--vk-signal-hi); border-color: var(--vk-signal-hi); }
.vk-btn-primary:active { transform: scale(0.985); }

.vk-btn-ghost {
  background: transparent;
  color: var(--vk-ink);
  border-color: var(--vk-rule-hi);
}
.vk-btn-ghost:hover { background: var(--vk-paper-low); border-color: var(--vk-ink-mid); }

.vk-btn-link {
  background: transparent;
  color: var(--vk-signal);
  padding: 4px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--vk-signal);
}
.vk-btn-link:hover { color: var(--vk-signal-hi); border-color: var(--vk-signal-hi); }

/* --- Card ------------------------------------------------------------------ */
.vk-card {
  background: var(--vk-paper-hi);
  border: 1px solid var(--vk-rule);
  border-radius: var(--vk-r-lg);
  padding: var(--vk-5);
}

.vk-card-trough {
  background: var(--vk-paper-low);
  border-color: var(--vk-rule);
}

/* --- Input ----------------------------------------------------------------- */
.vk-input {
  font-family: var(--vk-font-mono);
  font-size: var(--vk-text-sm);
  background: var(--vk-paper-hi);
  color: var(--vk-ink);
  border: 1px solid var(--vk-rule-hi);
  border-radius: var(--vk-r-md);
  padding: 10px 12px;
  width: 100%;
  transition: border-color var(--vk-dur-fast) var(--vk-ease);
}
.vk-input:focus {
  outline: none;
  border-color: var(--vk-signal);
  box-shadow: 0 0 0 3px var(--vk-signal-faint);
}
.vk-input::placeholder { color: var(--vk-ink-faint); }

/* --- Badge ----------------------------------------------------------------- */
.vk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vk-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--vk-track-mono);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--vk-r-sm);
  border: 1px solid var(--vk-rule-hi);
  color: var(--vk-ink-mid);
  background: var(--vk-paper-hi);
}
.vk-badge-live {
  color: var(--vk-signal);
  border-color: rgba(18,138,107,0.3);
  background: var(--vk-signal-faint);
}
.vk-badge-live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vk-signal);
  box-shadow: 0 0 8px rgba(18,138,107,0.6);
  animation: vk-pulse 2s var(--vk-ease) infinite;
}
.vk-badge-warn { color: var(--vk-amber); border-color: rgba(182,121,68,0.4); background: rgba(182,121,68,0.08); }
.vk-badge-err  { color: var(--vk-err);   border-color: rgba(196,66,58,0.35); background: rgba(196,66,58,0.06); }

@keyframes vk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Code ------------------------------------------------------------------ */
.vk-code-block {
  font-family: var(--vk-font-mono);
  font-size: var(--vk-text-sm);
  line-height: var(--vk-lead-base);
  background: var(--vk-canvas-dk);
  border: 1px solid var(--vk-rule-dk);
  border-radius: var(--vk-r-md);
  padding: var(--vk-4) var(--vk-5);
  color: var(--vk-ink-on-dk);
  overflow-x: auto;
  white-space: pre;
}
.vk-code-inline {
  font-family: var(--vk-font-mono);
  font-size: 0.92em;
  background: var(--vk-paper-low);
  padding: 1px 6px;
  border-radius: var(--vk-r-sm);
  border: 1px solid var(--vk-rule);
  color: var(--vk-signal);
}

.vk-tok-prompt  { color: var(--vk-signal-bright); }
.vk-tok-comment { color: var(--vk-ink-mid-dk); font-style: italic; }
.vk-tok-flag    { color: var(--vk-amber-bright); }
.vk-tok-string  { color: #d3c87a; }
.vk-tok-num     { color: #7aa6ff; }
.vk-tok-ok      { color: var(--vk-signal-bright); }

/* --- Rule ------------------------------------------------------------------ */
.vk-rule {
  border: 0;
  border-top: 1px solid var(--vk-rule);
  margin: var(--vk-7) 0;
}

/* --- Mesh-grid background pattern ----------------------------------------- */
.vk-mesh-bg {
  background-image:
    linear-gradient(var(--vk-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--vk-rule) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.vk-mesh-bg-dk {
  background-image:
    linear-gradient(var(--vk-rule-dk) 1px, transparent 1px),
    linear-gradient(90deg, var(--vk-rule-dk) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* --- Marquee --------------------------------------------------------------- */
@keyframes vk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}