/* VK Quantum — Design Tokens
 * ------------------------------------------------------------
 * Aesthetic: dark, dense, executive. Bloomberg-terminal restraint.
 * Single mode (dark only). Desktop-only (min-width 1280px).
 * No drop shadows. Surfaces defined by background-color differences.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color tokens ---------- */

  /* Backgrounds — three-step elevation, all near-black with purple undertone */
  --vk-bg-base:        #0E0A1A;   /* page background */
  --vk-surface-1:      #16111F;   /* cards, panels, sidebar */
  --vk-surface-2:      #1E1828;   /* elevated / hover / active rows */
  --vk-surface-3:      #261E33;   /* pressed / selected highlight */

  /* Borders — alpha, magenta-tinted to echo the focus ring */
  --vk-border-subtle:   rgba(233, 30, 99, 0.10);
  --vk-border-emphasis: rgba(233, 30, 99, 0.22);
  --vk-border-focus:    rgba(233, 30, 99, 0.55);

  /* Ambient ring system — cards and inputs carry a 1px magenta ring so
   * the focus state feels native, not bolted on. */
  --vk-ring-ambient: 0 0 0 1px rgba(233, 30, 99, 0.14);
  --vk-ring-hover:   0 0 0 1px rgba(233, 30, 99, 0.30);
  --vk-ring-focus:   0 0 0 2px rgba(233, 30, 99, 0.55);

  /* Brand accent — magenta → orange.
   * Use SPARINGLY: active nav, primary CTA, key highlights only. */
  --vk-magenta:        #E91E63;
  --vk-orange:         #FF6B35;
  --vk-gradient:       linear-gradient(135deg, #E91E63 0%, #FF6B35 100%);
  --vk-gradient-soft:  linear-gradient(135deg, rgba(233,30,99,0.18) 0%, rgba(255,107,53,0.18) 100%);

  /* Text — warm off-white, never pure white */
  --vk-text-primary:   #F5F2EA;
  --vk-text-secondary: #A8A0B3;
  --vk-text-tertiary:  #6B6478;
  --vk-text-link:      #E91E63;   /* inline entity links inside copy */

  /* Functional / confidence — green / amber / red.
   * Decorative use forbidden — these encode data only. */
  --vk-success:        #5DCAA5;   /* high confidence, healthy */
  --vk-warning:        #F0993D;   /* medium confidence, attention */
  --vk-danger:         #E24B6A;   /* low confidence, risk, blocker */

  --vk-success-bg:     rgba(93, 202, 165, 0.12);
  --vk-warning-bg:     rgba(240, 153, 61, 0.14);
  --vk-danger-bg:      rgba(226, 75, 106, 0.14);
  --vk-neutral-bg:     rgba(168, 160, 179, 0.10);

  /* ---------- Type tokens ---------- */
  --vk-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vk-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Size scale — dense by design. KPI is the ceiling. */
  --vk-text-micro:   10px;   /* badge labels */
  --vk-text-label:   11px;   /* small labels, micro caps */
  --vk-text-body:    13px;   /* default body */
  --vk-text-row:     13px;   /* table rows */
  --vk-text-section: 14px;   /* section / card headers */
  --vk-text-kpi:     22px;   /* KPI numbers, big stats */
  --vk-text-display: 28px;   /* page titles (rare) */

  --vk-weight-regular:   400;
  --vk-weight-medium:    500;
  --vk-weight-semibold:  600;

  --vk-line-tight:  1.25;
  --vk-line-body:   1.5;

  --vk-tracking-caps: 0.08em;  /* micro-caps labels only */

  /* ---------- Spacing — 4px base ---------- */
  --vk-sp-1:  4px;
  --vk-sp-2:  8px;
  --vk-sp-3:  12px;
  --vk-sp-4:  14px;   /* card padding floor */
  --vk-sp-5:  16px;   /* card padding ceiling */
  --vk-sp-6:  20px;
  --vk-sp-8:  28px;

  /* ---------- Radii — small, never pill ---------- */
  --vk-radius-sm: 3px;
  --vk-radius-md: 5px;
  --vk-radius-lg: 8px;
  --vk-radius-pill: 999px;  /* badges only */

  /* ---------- Layout constants ---------- */
  --vk-sidebar-w: 200px;
  --vk-header-h:  48px;
  --vk-rail-w:    180px;     /* filter rails in directory / graph */
  --vk-panel-w:   480px;     /* entity profile slide-in */
  --vk-drawer-w:  400px;     /* evidence drawer slide-in */

  /* ---------- Motion ---------- */
  --vk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --vk-duration-fast:  120ms;
  --vk-duration-mid:   200ms;
}

/* ============================================================
 * Semantic element styles
 * Apply these directly to bare h1/h2/p/code/etc so the same
 * vocabulary works whether you use utility classes or not.
 * ============================================================ */

html, body {
  background: var(--vk-bg-base);
  color: var(--vk-text-primary);
  font-family: var(--vk-font-sans);
  font-size: var(--vk-text-body);
  line-height: var(--vk-line-body);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--vk-text-display);
  font-weight: var(--vk-weight-medium);
  letter-spacing: -0.01em;
  line-height: var(--vk-line-tight);
  margin: 0;
}

h2 {
  font-size: 18px;
  font-weight: var(--vk-weight-medium);
  line-height: var(--vk-line-tight);
  margin: 0;
}

h3, .vk-section-header {
  font-size: var(--vk-text-section);
  font-weight: var(--vk-weight-medium);
  line-height: var(--vk-line-tight);
  color: var(--vk-text-primary);
  margin: 0;
}

p {
  margin: 0;
  color: var(--vk-text-primary);
}

small, .vk-label {
  font-size: var(--vk-text-label);
  color: var(--vk-text-secondary);
}

.vk-micro-caps {
  font-size: var(--vk-text-label);
  letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase;
  color: var(--vk-text-tertiary);
  font-weight: var(--vk-weight-medium);
}

.vk-mono, code, kbd, samp {
  font-family: var(--vk-font-mono);
  font-variant-numeric: tabular-nums;
}

.vk-kpi-number {
  font-family: var(--vk-font-mono);
  font-size: var(--vk-text-kpi);
  font-weight: var(--vk-weight-medium);
  letter-spacing: -0.01em;
  color: var(--vk-text-primary);
}

a, .vk-link {
  color: var(--vk-text-link);
  text-decoration: none;
  border-bottom: 1px dotted rgba(233, 30, 99, 0.35);
  transition: color var(--vk-duration-fast) var(--vk-ease),
              border-color var(--vk-duration-fast) var(--vk-ease);
}
a:hover, .vk-link:hover {
  color: #FF6B35;
  border-bottom-color: rgba(255, 107, 53, 0.6);
}

/* ============================================================
 * Surface and component primitives
 * ============================================================ */

.vk-card {
  background: var(--vk-surface-1);
  border-radius: var(--vk-radius-md);
  padding: var(--vk-sp-5);
  box-shadow: var(--vk-ring-ambient);
}

.vk-card--inset {
  background: var(--vk-surface-2);
}

.vk-divider {
  height: 1px;
  background: var(--vk-border-subtle);
}

/* Confidence pills — fixed semantic mapping */
.vk-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 8px;
  border-radius: var(--vk-radius-pill);
  font-size: var(--vk-text-micro);
  font-weight: var(--vk-weight-medium);
  letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.vk-pill--high    { background: var(--vk-success-bg); color: var(--vk-success); }
.vk-pill--med     { background: var(--vk-warning-bg); color: var(--vk-warning); }
.vk-pill--low     { background: var(--vk-danger-bg);  color: var(--vk-danger);  }
.vk-pill--neutral { background: var(--vk-neutral-bg); color: var(--vk-text-secondary); }

/* Score number with semantic color */
.vk-score--high { color: var(--vk-success); }
.vk-score--med  { color: var(--vk-warning); }
.vk-score--low  { color: var(--vk-danger);  }
.vk-score--mute { color: var(--vk-text-tertiary); }

/* Buttons */
.vk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--vk-radius-sm);
  font-family: var(--vk-font-sans);
  font-size: var(--vk-text-body);
  font-weight: var(--vk-weight-medium);
  background: var(--vk-surface-2);
  color: var(--vk-text-primary);
  border: none;
  box-shadow: var(--vk-ring-ambient);
  cursor: pointer;
  transition: background var(--vk-duration-fast) var(--vk-ease),
              box-shadow var(--vk-duration-fast) var(--vk-ease);
}
.vk-btn:hover { background: var(--vk-surface-3); box-shadow: var(--vk-ring-hover); }

.vk-btn--primary {
  background: var(--vk-gradient);
  color: #fff;
  box-shadow: none;
  font-weight: var(--vk-weight-semibold);
}
.vk-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px rgba(233,30,99,0.35); }

.vk-btn--ghost {
  background: transparent;
  box-shadow: none;
  color: var(--vk-text-secondary);
}
.vk-btn--ghost:hover { background: var(--vk-surface-2); color: var(--vk-text-primary); box-shadow: var(--vk-ring-ambient); }

/* Input */
.vk-input {
  height: 28px;
  padding: 0 10px;
  background: var(--vk-surface-1);
  color: var(--vk-text-primary);
  border: none;
  box-shadow: var(--vk-ring-ambient);
  border-radius: var(--vk-radius-sm);
  font-family: var(--vk-font-sans);
  font-size: var(--vk-text-body);
  outline: none;
  transition: box-shadow var(--vk-duration-fast) var(--vk-ease);
}
.vk-input:hover { box-shadow: var(--vk-ring-hover); }
.vk-input:focus { box-shadow: var(--vk-ring-focus); }
.vk-input::placeholder { color: var(--vk-text-tertiary); }

/* Focus ring — the ONLY allowed shadow */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.45);
  border-radius: var(--vk-radius-sm);
}