/* ============================================================
   MQTT SCOPE — THEME TOKENS
   Dark-first, inspired by oscilloscopes / devtools
   ============================================================ */

:root,
[data-theme="dark"] {
  /* Base surfaces */
  --bg-0: #0d0f12;
  --bg-1: #14171c;
  --bg-2: #1a1e25;
  --bg-3: #222731;
  --bg-hover: #2a3040;

  /* Borders & lines */
  --line-1: #232833;
  --line-2: #2f3644;
  --line-3: #3d4556;

  /* Text */
  --text-1: #e6e8ec;
  --text-2: #a8aeb9;
  --text-3: #6c7380;
  --text-4: #474d59;

  /* Signals — paleta Labfy (azul céu) */
  --accent:       #78b4e6;   /* azul Labfy — brand / primary */
  --accent-dim:   #3d5a76;
  --signal-1:     #7ee787;   /* green — live data / connected */
  --signal-2:     #79c0ff;   /* blue — info */
  --signal-warn:  #ffab70;   /* orange */
  --signal-err:   #ff7b72;   /* red */
  --signal-mute:  #545d6e;

  /* Payloads / syntax */
  --syn-string: #a5d6ff;
  --syn-number: #ffd580;
  --syn-bool:   #ff7b72;
  --syn-null:   #8b949e;
  --syn-key:    #d2a8ff;
  --syn-punct:  #8b949e;

  /* Diff */
  --diff-add-bg: rgba(126,231,135,0.14);
  --diff-add-fg: #7ee787;
  --diff-del-bg: rgba(255,123,114,0.14);
  --diff-del-fg: #ff7b72;

  /* Shadow */
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-soft: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);

  /* Fonts */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Metrics */
  --radius-1: 3px;
  --radius-2: 6px;
  --radius-3: 10px;
  --topbar-h: 52px;
}

[data-theme="light"] {
  --bg-0: #f5f5f0;
  --bg-1: #ffffff;
  --bg-2: #f0efe9;
  --bg-3: #e6e5dd;
  --bg-hover: #d8d7cb;

  --line-1: #e2e1d7;
  --line-2: #c9c7b9;
  --line-3: #a8a699;

  --text-1: #1a1a1a;
  --text-2: #4a4a4a;
  --text-3: #7a7a7a;
  --text-4: #a0a0a0;

  --accent:     #4a90d9;
  --accent-dim: #78b4e6;
  --signal-1:   #1a7f37;
  --signal-2:   #0969da;
  --signal-warn:#bc4c00;
  --signal-err: #cf222e;
  --signal-mute:#8a8a8a;

  --syn-string: #0550ae;
  --syn-number: #953800;
  --syn-bool:   #cf222e;
  --syn-null:   #6e7781;
  --syn-key:    #8250df;
  --syn-punct:  #57606a;

  --diff-add-bg: rgba(26,127,55,0.12);
  --diff-add-fg: #1a7f37;
  --diff-del-bg: rgba(207,34,46,0.12);
  --diff-del-fg: #cf222e;

  --shadow-pop: 0 6px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.05);
}