/* ──────────────────────────────────────────────────────────────────
   VirtuProbe Studio — Design Tokens (CSS Custom Properties)
   Generated from tokens.json. Hand-edit tokens.json, mirror here.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color · base surfaces ─────────────────────────────── */
  --vp-color-bg:        #0a0d0c;  /* page */
  --vp-color-bg-1:      #0f1413;  /* card/panel */
  --vp-color-bg-2:      #141a18;  /* hover, table header */
  --vp-color-bg-3:      #1b231f;  /* deep wells */
  --vp-color-line:      #1f2a25;  /* default divider */
  --vp-color-line-2:    #2a3830;  /* container border */

  /* ── Color · foreground ────────────────────────────────── */
  --vp-color-fg:        #e6f2ec;  /* primary text */
  --vp-color-fg-dim:    #a3b3ac;  /* body */
  --vp-color-fg-mute:   #6b7872;  /* meta, captions */
  --vp-color-fg-faint:  #3d4742;  /* dashes, disabled */

  /* ── Color · brand ─────────────────────────────────────── */
  --vp-color-neon:      #6ff39b;  /* primary accent */
  --vp-color-neon-mint: #5ef0c2;  /* gradient stop A */
  --vp-color-neon-lime: #8df860;  /* gradient stop B / success */
  --vp-color-neon-glow: #6ff39b33;

  /* ── Color · semantic ──────────────────────────────────── */
  --vp-color-info:      #5ec3f0;  /* HTTP / informational */
  --vp-color-warn:      #f5c453;  /* SMTP / warnings */
  --vp-color-danger:    #ff6b6b;  /* errors / destructive */
  --vp-color-violet:    #c79df5;  /* chains / LDAP */

  /* ── Color · protocol-coded (used in tags + bars) ──────── */
  --vp-protocol-http:   var(--vp-color-info);
  --vp-protocol-smtp:   var(--vp-color-warn);
  --vp-protocol-imap:   var(--vp-color-neon-lime);
  --vp-protocol-ldap:   var(--vp-color-violet);
  --vp-protocol-spamd:  #ff9d6b;
  --vp-protocol-socks:  #d8d8d8;

  /* ── Typography · families ─────────────────────────────── */
  --vp-font-display:  "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --vp-font-body:     "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --vp-font-mono:     "Geist Mono", ui-monospace, "JetBrains Mono", monospace;

  /* ── Typography · scale (rem, body=15px @ 1rem) ────────── */
  --vp-text-3xs:  10px;   /* mono labels */
  --vp-text-2xs:  11px;
  --vp-text-xs:   12px;
  --vp-text-sm:   13.5px;
  --vp-text-base: 15px;   /* body */
  --vp-text-md:   16px;
  --vp-text-lg:   19px;   /* lead paragraph */
  --vp-text-xl:   22px;
  --vp-text-2xl:  28px;
  --vp-text-3xl:  40px;
  --vp-text-4xl:  56px;
  --vp-text-5xl:  72px;

  /* ── Typography · weights ──────────────────────────────── */
  --vp-fw-light:    300;
  --vp-fw-regular:  400;
  --vp-fw-medium:   500;  /* default UI weight */
  --vp-fw-semibold: 600;
  --vp-fw-bold:     700;

  /* ── Typography · line heights ─────────────────────────── */
  --vp-lh-tight:   1.04;  /* display */
  --vp-lh-snug:    1.2;
  --vp-lh-normal:  1.55;  /* body */
  --vp-lh-relaxed: 1.7;
  --vp-lh-mono:    1.5;

  /* ── Typography · tracking ─────────────────────────────── */
  --vp-track-display: -0.02em;
  --vp-track-h2:      -0.018em;
  --vp-track-h3:      -0.005em;
  --vp-track-mono-uc: 0.14em;   /* uppercase mono labels */
  --vp-track-eyebrow: 0.18em;   /* eyebrows */

  /* ── Spacing · 4px scale ───────────────────────────────── */
  --vp-space-0:  0;
  --vp-space-1:  4px;
  --vp-space-2:  8px;
  --vp-space-3:  12px;
  --vp-space-4:  16px;
  --vp-space-5:  20px;
  --vp-space-6:  24px;
  --vp-space-7:  32px;
  --vp-space-8:  40px;
  --vp-space-9:  48px;
  --vp-space-10: 56px;
  --vp-space-11: 64px;
  --vp-space-12: 80px;
  --vp-space-13: 96px;
  --vp-space-14: 128px;

  /* ── Radius ────────────────────────────────────────────── */
  --vp-radius-xs:  3px;   /* inline pills */
  --vp-radius-sm:  4px;   /* buttons, badges */
  --vp-radius-md:  6px;   /* default UI */
  --vp-radius-lg:  10px;  /* cards */
  --vp-radius-xl:  14px;  /* hero containers */
  --vp-radius-pill: 999px;

  /* ── Borders ───────────────────────────────────────────── */
  --vp-border-width-1: 1px;
  --vp-border-width-2: 2px;
  --vp-border-default: 1px solid var(--vp-color-line);
  --vp-border-strong:  1px solid var(--vp-color-line-2);
  --vp-border-accent:  1px solid var(--vp-color-neon);

  /* ── Shadows / glow ────────────────────────────────────── */
  --vp-shadow-sm:    0 2px 6px -2px rgba(0,0,0,0.4);
  --vp-shadow-md:    0 8px 24px -8px rgba(0,0,0,0.5);
  --vp-shadow-lg:    0 30px 80px -30px rgba(0,0,0,0.7);
  --vp-shadow-glow:  0 0 0 1px var(--vp-color-neon),
                     0 6px 20px -6px var(--vp-color-neon-glow);
  --vp-shadow-focus: 0 0 0 2px var(--vp-color-bg),
                     0 0 0 4px var(--vp-color-neon);

  /* ── Motion ────────────────────────────────────────────── */
  --vp-ease-standard:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --vp-ease-emphasised: cubic-bezier(0.16, 1, 0.3, 1);
  --vp-ease-in:         cubic-bezier(0.5, 0, 0.75, 0);
  --vp-ease-out:        cubic-bezier(0.25, 1, 0.5, 1);

  --vp-dur-instant: 80ms;
  --vp-dur-fast:    150ms;   /* hover, focus, color shifts */
  --vp-dur-base:    240ms;   /* enter/exit */
  --vp-dur-slow:    400ms;   /* large surfaces */
  --vp-dur-pulse:   1600ms;  /* live indicators */

  /* ── Z-index scale ─────────────────────────────────────── */
  --vp-z-base:    0;
  --vp-z-dropdown: 100;
  --vp-z-sticky:   200;
  --vp-z-overlay:  900;
  --vp-z-modal:   1000;
  --vp-z-toast:   1100;
  --vp-z-tooltip: 1200;

  /* ── Layout ────────────────────────────────────────────── */
  --vp-container-max:  1200px;
  --vp-sidebar-w:      260px;
  --vp-app-rail-w:     56px;
  --vp-topbar-h:       64px;

  /* ── Focus ring ─────────────────────────────────────────── */
  --vp-focus-ring: 0 0 0 2px var(--vp-color-bg), 0 0 0 4px var(--vp-color-neon);
}