:root {
  /* ── Brand palette ── */
  --nx-bg:          #F9F7F7;
  --nx-surface:     #DBE2EF;
  --nx-primary:     #3F72AF;
  --nx-primary-dk:  #2e5a8e;
  --nx-primary-lt:  #d0e1f9;
  --nx-ink:         #112D4E;
  --nx-ink-2:       #2d4a6a;
  --nx-ink-3:       #5a7a9a;
  --nx-ink-4:       #8ca8c4;
  --nx-white:       #ffffff;

  /* ── Glass morphism ── */
  --nx-glass:       rgba(255, 255, 255, 0.62);
  --nx-glass-brd:   rgba(255, 255, 255, 0.42);
  --nx-glass-dk:    rgba(17, 45, 78, 0.06);

  /* ── Radius ── */
  --nx-r-xs:  6px;
  --nx-r-sm:  13px;
  --nx-r:     22px;
  --nx-r-lg:  28px;
  --nx-r-xl:  36px;

  /* Aliases used in older views */
  --nx-radius:    var(--nx-r);
  --nx-radius-sm: var(--nx-r-sm);

  /* ── Shadows ── */
  --nx-shadow-sm: 0 2px  8px rgba(17, 45, 78, 0.08);
  --nx-shadow:    0 8px 32px rgba(17, 45, 78, 0.12);
  --nx-shadow-lg: 0 16px 48px rgba(17, 45, 78, 0.18);

  /* ── Typography ── */
  --nx-font:   'Poppins', system-ui, -apple-system, sans-serif;
  --nx-fs-xs:  0.70rem;
  --nx-fs-sm:  0.813rem;
  --nx-fs-base:1rem;
  --nx-fs-md:  1.063rem;
  --nx-fs-lg:  1.25rem;
  --nx-fs-xl:  1.5rem;
  --nx-fs-2xl: 1.875rem;
  --nx-fs-3xl: 2.25rem;
  --nx-lh:     1.6;

  /* ── Spacing scale ── */
  --nx-space-1:  0.25rem;
  --nx-space-2:  0.5rem;
  --nx-space-3:  0.75rem;
  --nx-space-4:  1rem;
  --nx-space-5:  1.25rem;
  --nx-space-6:  1.5rem;
  --nx-space-8:  2rem;
  --nx-space-10: 2.5rem;
  --nx-space-12: 3rem;
  --nx-space-16: 4rem;

  /* ── Layout ── */
  --nx-sidebar-w:          260px;
  --nx-sidebar-collapsed-w: 64px;
  --nx-header-h:    64px;
  --nx-content-max: 1280px;

  /* ── Status colours ── */
  --nx-success:     #1fa87e;
  --nx-success-bg:  #e6f9f3;
  --nx-warning:     #d4881a;
  --nx-warning-bg:  #fff4e0;
  --nx-danger:      #c0392b;
  --nx-danger-bg:   #fde8e6;
  --nx-info:        #2980b9;
  --nx-info-bg:     #e6f2fb;

  /* ── Transition ── */
  --nx-ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --nx-dur:     160ms;
  --nx-dur-lg:  280ms;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */
html.dark {
  --nx-bg:          #0f1724;
  --nx-surface:     #1a2540;
  --nx-primary:     #5a9fd4;
  --nx-primary-dk:  #4488c0;
  --nx-primary-lt:  #1e3a5f;
  --nx-ink:         #e8edf5;
  --nx-ink-2:       #b8c8de;
  --nx-ink-3:       #7a9ab8;
  --nx-ink-4:       #4a6a88;
  --nx-white:       #1a2540;

  --nx-glass:       rgba(26, 37, 64, 0.80);
  --nx-glass-brd:   rgba(90, 159, 212, 0.18);
  --nx-glass-dk:    rgba(0, 0, 0, 0.25);

  --nx-shadow-sm: 0 2px  8px rgba(0, 0, 0, 0.30);
  --nx-shadow:    0 8px 32px rgba(0, 0, 0, 0.40);
  --nx-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.50);

  --nx-success-bg:  #0d2e1e;
  --nx-warning-bg:  #2e1f00;
  --nx-danger-bg:   #2e0d0a;
  --nx-info-bg:     #0d1e2e;

  color-scheme: dark;
}

html.dark body {
  background-color: var(--nx-bg);
  color: var(--nx-ink);
}

/* Dark mode body/shell tinting */
html.dark .nx-shell   { background: var(--nx-bg); }
html.dark .nx-sidebar { background: #0d1420; border-right-color: var(--nx-glass-brd); }
html.dark .nx-header  { background: rgba(15,23,36,.92); border-bottom-color: var(--nx-glass-brd); }
html.dark .nx-content { background: var(--nx-bg); }

/* Cards and inputs */
html.dark .nx-card        { background: var(--nx-glass); border-color: var(--nx-glass-brd); }
html.dark .nx-input,
html.dark .nx-select,
html.dark textarea.nx-input { background: rgba(26,37,64,.9); border-color: var(--nx-glass-brd); color: var(--nx-ink); }
html.dark .nx-input:focus { border-color: var(--nx-primary); background: rgba(26,37,64,1); }
html.dark input, html.dark textarea, html.dark select { color: var(--nx-ink); }

/* Navigation links */
html.dark .nx-nav-link       { color: var(--nx-ink-3); }
html.dark .nx-nav-link:hover { color: var(--nx-ink); background: rgba(90,159,212,.1); }
html.dark .nx-nav-link.active { color: var(--nx-primary); background: rgba(90,159,212,.15); }

/* Tables */
html.dark table th { background: rgba(26,37,64,.8); color: var(--nx-ink-3); }
html.dark table tr:hover td { background: rgba(90,159,212,.06); }
html.dark .nx-table-row:hover { background: rgba(90,159,212,.05); }

/* Inbox dark mode */
html.dark .nx-inbox-sidebar         { background: rgba(13,20,32,.8); }
html.dark .nx-inbox-thread-head     { background: rgba(15,23,36,.6); }
html.dark .nx-inbox-messages        { background-color: #111d2e; background-image: radial-gradient(circle at 25% 25%, rgba(90,159,212,.05) 0%, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%235a9fd4' fill-opacity='.06'/%3E%3C/svg%3E"); }
html.dark .nx-inbox-msg.inbound  .nx-inbox-msg-bubble { background: #1e2f48; color: var(--nx-ink); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
html.dark .nx-inbox-compose  { background: rgba(13,20,32,.95); border-top-color: var(--nx-glass-brd); }
html.dark .nx-inbox-compose-box { background: rgba(26,37,64,.9); border-color: var(--nx-glass-brd); color: var(--nx-ink); }
html.dark .nx-inbox-compose-box:focus { border-color: var(--nx-primary); }
html.dark .nx-inbox-thread-item:hover { background: rgba(90,159,212,.06); }
html.dark .nx-inbox-thread-item.active { background: rgba(90,159,212,.12); }

/* Modals */
html.dark .nx-modal          { background: #13203a; border-color: var(--nx-glass-brd); }
html.dark .nx-modal-backdrop { background: rgba(0,0,0,.65); }

/* Toasts */
html.dark #nx-toasts .nx-toast { background: #1a2540; color: var(--nx-ink); }

/* Buttons */
html.dark .nx-btn-ghost  { color: var(--nx-ink-3); border-color: var(--nx-glass-brd); }
html.dark .nx-btn-ghost:hover { background: rgba(90,159,212,.1); color: var(--nx-ink); }
html.dark .nx-btn-secondary { background: rgba(90,159,212,.15); color: var(--nx-primary); border-color: var(--nx-glass-brd); }

/* Transition for smooth dark/light switch */
html { transition: background-color .25s var(--nx-ease), color .25s var(--nx-ease); }