/* ==========================================================================
   Vaporkernel Design System — colors_and_type.css
   "Oxide on the metal" — black-first, TUI/CLI-forward, mono-led.
   Swiss grotesque for voice, monospace for information. Oxide-green signal.
   Source of truth for tokens. Import this in any vaporkernel surface.
   ========================================================================== */

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

:root {
  /* --------------------------------------------------------------------------
     PALETTE — Near-black canvas, off-white ink, oxide-green signal.
     Inspired by TUI / CLI / ASCII art on black. Green, with red/blue/yellow.
     -------------------------------------------------------------------------- */

  /* Canvas — near-black, faintly cool. Never pure #000. */
  --vk-paper:          #0d1011;   /* primary surface — oxide black */
  --vk-paper-hi:       #15191b;   /* lifted card */
  --vk-paper-low:      #090b0c;   /* recessed: code, inputs */
  --vk-paper-trough:   #060708;   /* deep recess */
  --vk-rule:           #23292b;   /* hairline borders */
  --vk-rule-hi:        #363d3f;   /* emphasized borders */

  /* Ink — light on black */
  --vk-ink:            #e8eceb;   /* primary text — off-white */
  --vk-ink-mid:        #969d9d;   /* secondary text */
  --vk-ink-low:        #69716f;   /* metadata, captions */
  --vk-ink-faint:      #454b4a;   /* disabled */

  /* Darkest surfaces (terminal/code regions) — pushed below the canvas */
  --vk-void:           #070809;
  --vk-canvas-dk:      #0a0c0d;
  --vk-panel-dk:       #14181a;
  --vk-rule-dk:        #232a2c;
  --vk-ink-on-dk:      #e8eceb;
  --vk-ink-mid-dk:     #8b9290;

  /* Signal — oxide green. The brand. Bright on black. */
  --vk-signal:         #48d597;   /* oxide green — primary accent */
  --vk-signal-hi:      #6ee3ad;   /* hover, brighter */
  --vk-signal-bright:  #7bf7c9;   /* THE phosphor — on darkest surfaces */
  --vk-signal-faint:   rgba(72, 213, 151, 0.10);
  --vk-signal-soft:    rgba(72, 213, 151, 0.20);

  /* Accent — oxide yellow, the hardware/provider voice */
  --vk-amber:          #e8b34a;
  --vk-amber-bright:   #f5cd6f;

  /* Status semantics — oxide red / blue / yellow */
  --vk-ok:             var(--vk-signal);
  --vk-warn:           var(--vk-amber);
  --vk-err:            #ec6a5a;
  --vk-info:           #6a8cff;

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

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     • Helvetica Neue — Swiss grotesque voice (headlines + body).
       Stand-in for Neue Haas Grotesk, Oxide's primary typeface.
     • Spline Sans Mono — all information-led type: labels, data, UI, code.
       Stand-in for GT America Mono.
     -------------------------------------------------------------------------- */

  --vk-font-mono:    'Spline Sans Mono', 'GT America Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --vk-font-sans:    'Helvetica Neue', Helvetica, 'Arial Nova', Arial, system-ui, sans-serif;
  --vk-font-serif:   'Helvetica Neue', Helvetica, Arial, sans-serif; /* serif retired — Oxide uses no 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 hairline + deep black, not soft drop shadow */
  --vk-shadow-sm:  0 0 0 1px var(--vk-rule), 0 1px 2px rgba(0,0,0,0.4);
  --vk-shadow-md:  0 0 0 1px var(--vk-rule), 0 8px 24px rgba(0,0,0,0.5);
  --vk-shadow-lg:  0 0 0 1px var(--vk-rule-hi), 0 24px 48px rgba(0,0,0,0.65);
  --vk-glow-signal: 0 0 0 1px rgba(72,213,151,0.45), 0 6px 24px rgba(72,213,151,0.14);

  /* 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);
}

/* --------------------------------------------------------------------------
   SMOKY-VAPOR BACKDROP — the signature ground for full-page surfaces.
   Drifting gray gradient field on near-black; a faint green whisper for brand.
   Applies to <body class="vaporkernel">; cards/panels paint their own
   surfaces on top so text stays legible. Use .vk-vapor-bg to drop the same
   field onto any other element (decks, hero panels, etc).
   -------------------------------------------------------------------------- */
body.vaporkernel {
  background:
    radial-gradient(95% 75% at 50% -12%, #191e21 0%, transparent 50%),
    radial-gradient(80% 65% at 82% 112%, #171c1f 0%, transparent 54%),
    linear-gradient(180deg, #0f1316 0%, #0c1012 55%, #0a0c0e 100%);
  background-attachment: fixed;
}
body.vaporkernel::before,
body.vaporkernel::after {
  content: "";
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
/* primary plumes */
body.vaporkernel::before {
  background:
    radial-gradient(28vmax 22vmax at 20% 18%, rgba(192,202,208,0.22), transparent 60%),
    radial-gradient(32vmax 24vmax at 78% 26%, rgba(140,151,158,0.20), transparent 60%),
    radial-gradient(24vmax 18vmax at 54% 42%, rgba(172,182,190,0.15), transparent 62%),
    radial-gradient(42vmax 34vmax at 64% 86%, rgba(110,120,128,0.20), transparent 58%),
    radial-gradient(24vmax 20vmax at 32% 70%, rgba(150,160,168,0.15), transparent 62%),
    radial-gradient(58vmax 56vmax at 50% 50%, rgba(72,213,151,0.05), transparent 66%);
  filter: blur(11px) saturate(1.06);
  animation: vk-vapor-drift-a 42s ease-in-out infinite alternate;
}
/* secondary, slower counter-drift for depth */
body.vaporkernel::after {
  background:
    radial-gradient(40vmax 32vmax at 14% 78%, rgba(168,178,186,0.16), transparent 60%),
    radial-gradient(36vmax 30vmax at 88% 64%, rgba(120,130,138,0.17), transparent 58%),
    radial-gradient(30vmax 26vmax at 48% 8%, rgba(158,168,176,0.13), transparent 62%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: vk-vapor-drift-b 58s ease-in-out infinite alternate;
}
@keyframes vk-vapor-drift-a {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1.04) rotate(0deg); }
  50%  { transform: translate3d(2.5%, 2%, 0) scale(1.14) rotate(2deg); }
  100% { transform: translate3d(-1%, 2.5%, 0) scale(1.07) rotate(-1.5deg); }
}
@keyframes vk-vapor-drift-b {
  0%   { transform: translate3d(2%, 1%, 0) scale(1.1); }
  50%  { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); }
  100% { transform: translate3d(1.5%, -2%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  body.vaporkernel::before,
  body.vaporkernel::after { animation: none; }
}

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

.vk-display {
  font-family: var(--vk-font-sans);
  font-weight: 600;
  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-sans);
  font-weight: 600;
  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-sans);
  font-weight: 600;
  font-size: var(--vk-text-2xl);
  line-height: 1.05;
  letter-spacing: var(--vk-track-tight);
}

.vk-h3 {
  font-family: var(--vk-font-sans);
  font-weight: 600;
  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-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--vk-text-xl);
  line-height: 1.25;
  letter-spacing: var(--vk-track-snug);
  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(72,213,151,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(72,213,151,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: #e8b34a; }
.vk-tok-num     { color: #6a8cff; }
.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;
}

/* --- Vapor surface --------------------------------------------------------
   Reusable smoky-gray field for any element (panels, decks, hero blocks).
   The blueprint mesh-grid pattern is retired in favor of this.
   -------------------------------------------------------------------------- */
.vk-vapor-bg {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 80% at 70% 20%, rgba(176,186,192,0.10), transparent 70%),
    radial-gradient(55% 70% at 25% 85%, rgba(110,120,128,0.10), transparent 72%),
    linear-gradient(180deg, #12171a 0%, #0c1012 60%, #0a0c0e 100%);
}

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