/* ============================================================
   NexoCRM — Design Tokens (from spec v1.0)
   ============================================================ */
:root {
  /* ---- Palette ---- */
  --green-primary: #1D9E75;
  --green-primary-d: #168862;
  --brand-navy: #0B1F3A;
  --brand-navy-2: #102a4d;
  --green-light: #E1F5EE;
  --green-text: #085041;
  --blue-info: #378ADD;
  --blue-info-light: #E6F1FB;
  --blue-text: #0C447C;
  --amber: #BA7517;
  --amber-light: #FAEEDA;
  --amber-text: #633806;
  --red-error: #E24B4A;
  --red-light: #FCEBEB;
  --red-text: #791F1F;
  --purple-ai: #534AB7;
  --purple-light: #EEEDFE;
  --purple-text: #26215C;
  --surface: #F5F5F3;
  --border: #E5E7EB;
  --text-1: #2C2C2A;
  --text-2: #888780;
  --white: #FFFFFF;
  --neutral-light: #F1EFE8;
  --neutral-text: #444441;
  --placeholder: #9CA3AF;
  --sidebar-item: #7fa8c9;

  /* ---- Spacing (base 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---- Radius ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* ---- Shadows ---- */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.05);
  --sh-md: 0 4px 6px rgba(0,0,0,0.07);
  --sh-lg: 0 10px 15px rgba(0,0,0,0.1);
  --sh-card: 0 1px 3px rgba(0,0,0,0.08);
  --sh-focus: 0 0 0 3px rgba(29,158,117,0.25);

  /* ---- Typography ---- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --sidebar-w: 220px;
  --sidebar-w-collapsed: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text-1);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8d8d4; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c4c4c0; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Type scale helpers ---- */
.t-display { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.t-h1 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.t-h2 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.t-h3 { font-size: 15px; font-weight: 500; line-height: 1.4; }
.t-body-l { font-size: 14px; font-weight: 400; line-height: 1.6; }
.t-body { font-size: 13px; font-weight: 400; line-height: 1.5; }
.t-caption { font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--text-2); }
.t-label { font-size: 11px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.t-mono { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; }

.nx-fade { animation: nxFade .28s ease both; }
@keyframes nxFade { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nx-fade { animation: none; } }
@keyframes nxPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.nx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-primary); animation: nxPulse 1.6s ease-in-out infinite; }