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

:root {
  --bg-0:    #0B0D12;
  --bg-1:    #12151C;
  --bg-2:    #1A1E28;
  --bg-3:    #232836;

  /* Legacy NAV_BAR aliases — canonical fallback when injection absent */
  --bg-root: var(--bg-0);
  --bg-card: var(--bg-1);
  --bg-card-hover: var(--bg-2);
  --bg-surface: var(--bg-0);
  --bg-input: var(--bg-2);
  --fg-1:    #E7EAF0;
  --fg-2:    #A0A7B5;
  --fg-3:    #6B7280;
  --border:  #2A2F3D;
  --accent:  var(--gold);
  --accent-info: #5EA0FF;
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger:  #F87171;
  --gold:    #1F66FF;

  --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono NL', 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --font-size-body:   13px;
  --font-size-label:  11px;
  --font-size-mono:   12px;
  --line-height-body: 1.45;

  --row-py: 6px;
  --row-px: 10px;
}

.dense { --row-py: 2px; }
.comfy { --row-py: 10px; }

.label, th, .col-header {
  font-size: var(--font-size-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}

.mono, .log-ts, .chat-id, .num-id,
.num, td.num, .count {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

.status-success { color: var(--success); }
.status-warning { color: var(--warning); }
.status-danger  { color: var(--danger);  }
.status-info    { color: var(--accent-info);  }
.status-muted   { color: var(--fg-3);    }