/* ============================================================
   SENDOTO DESIGN TOKENS
   ============================================================ */
:root {
  /* ── Brand colours ──────────────────────────────────────── */
  --sd-primary:        #0EA5E9;
  --sd-primary-light:  #e0f2fe;
  --sd-primary-dark:   #0284C7;
  --sd-accent:         #0ea5e9;
  --sd-success:        #0d9488;
  --sd-success-light:  #d1fae5;
  --sd-warning:        #d97706;
  --sd-warning-light:  #fef3c7;
  --sd-danger:         #dc2626;
  --sd-danger-light:   #fee2e2;
  --sd-info:           #7c3aed;
  --sd-info-light:     #ede9fe;

  /* ── Neutrals ───────────────────────────────────────────── */
  --sd-gray-50:   #f9fafb;
  --sd-gray-100:  #f3f4f6;
  --sd-gray-200:  #e5e7eb;
  --sd-gray-300:  #d1d5db;
  --sd-gray-400:  #9ca3af;
  --sd-gray-500:  #6b7280;
  --sd-gray-600:  #4b5563;
  --sd-gray-700:  #374151;
  --sd-gray-800:  #1f2937;
  --sd-gray-900:  #111827;

  /* ── Sidebar ────────────────────────────────────────────── */
  --sd-sidebar-bg:          #020617;
  --sd-sidebar-width:       240px;
  --sd-sidebar-text:        #94a3b8;
  --sd-sidebar-text-hover:  #f8fafc;
  --sd-sidebar-active-bg:   #0EA5E9;
  --sd-sidebar-active-text: #ffffff;
  --sd-sidebar-icon:        #64748b;
  --sd-sidebar-group:       #475569;
  --sd-sidebar-border:      rgba(255,255,255,0.06);

  /* ── Topbar ─────────────────────────────────────────────── */
  --sd-topbar-bg:     #ffffff;
  --sd-topbar-height: 64px;
  --sd-topbar-border: #e5e7eb;

  /* ── Page ───────────────────────────────────────────────── */
  --sd-page-bg:       #f8fafc;

  /* ── Cards ──────────────────────────────────────────────── */
  --sd-card-bg:       #ffffff;
  --sd-card-radius:   16px;
  --sd-card-shadow:   0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --sd-card-border:   #e5e7eb;

  /* ── Typography ─────────────────────────────────────────── */
  --sd-font:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sd-font-size:     14px;
  --sd-text-primary:  #111827;
  --sd-text-secondary:#6b7280;
  --sd-text-muted:    #9ca3af;

  /* ── Spacing scale (8-pt grid) ──────────────────────────── */
  --sd-space-1: 4px;
  --sd-space-2: 8px;
  --sd-space-3: 12px;
  --sd-space-4: 16px;
  --sd-space-5: 20px;
  --sd-space-6: 24px;
  --sd-space-8: 32px;
  --sd-space-10:40px;
  --sd-space-12:48px;

  /* ── Radius ─────────────────────────────────────────────── */
  --sd-radius-sm:  6px;
  --sd-radius-md:  10px;
  --sd-radius-lg:  16px;
  --sd-radius-xl:  24px;
  --sd-radius-full:9999px;

  /* ── Transitions ────────────────────────────────────────── */
  --sd-transition: 0.18s ease;
}