/* ============================================================
   nbarapm design tokens — single source of truth.
   Load FIRST. Every stylesheet references these variables;
   no raw hex values belong anywhere else.

   Identity: near-black canvas, one signature green accent,
   lowercase mono controls, dense data surfaces.
   ============================================================ */

:root {
  /* Neutral surfaces (page → panel → control → hover) */
  --bg: #1a1a1a;
  --surface: #212225;
  --surface-2: #2a2c30;
  --surface-3: #34373c;
  --overlay: rgba(0, 0, 0, 0.72);

  /* Lines */
  --border-subtle: #2a2d31;
  --border: #35383d;
  --border-strong: #474b51;

  /* Text */
  --text: #eceef0;
  --text-2: #a8aeb6;
  --text-3: #7a8088;

  /* Accent — the one signature color for interactive chrome */
  --accent: #65d761;
  --accent-strong: #7ce878;
  --accent-tint: rgba(101, 215, 97, 0.14);
  --accent-ring: rgba(101, 215, 97, 0.35);
  --on-accent: #0c130b;

  /* Data colors — charts, heatmaps, negative values only.
     Never for buttons, links, or chrome. */
  --data-blue: #3db3ff;
  --data-gold: #ffd75e;
  --data-red: #f0655f;

  /* Type */
  --font-sans: 'Fira', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.38);
}

/* ---- Global polish ---- */

::selection {
  background: var(--accent-ring);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Quiet, consistent scrollbars everywhere */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}