/* ═══════════════════════════════════════════════════════
   Onyx Design Tokens — Admin Console
   Sharp, high-density operational interface
   ═══════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── Typography ── */
  --console-font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --console-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Core palette ── */
  --console-text:         #18181b;   /* zinc-900 */
  --console-muted:        #71717a;   /* zinc-500 */
  --console-bg:           #f4f4f5;   /* zinc-100 */
  --console-surface:      #ffffff;
  --console-border:       #d4d4d8;   /* zinc-300 */
  --console-border-subtle:#e4e4e7;   /* zinc-200 */
  --console-shadow-color: rgba(0, 0, 0, 0.06);

  /* ── Semantic colors ── */
  --console-primary:        #7c3aed; /* violet-600 */
  --console-primary-strong: #6d28d9; /* violet-700 */
  --console-primary-soft:   #ede9fe; /* violet-100 */
  --console-secondary:      #0d9488; /* teal-600 */
  --console-info:           #0284c7; /* sky-600 */
  --console-success:        #059669; /* emerald-600 */
  --console-warning:        #d97706; /* amber-600 */
  --console-danger:         #dc2626; /* red-600 */

  /* ── Navigation ── */
  --console-nav-bg:      #18181b;   /* zinc-900 */
  --console-nav-surface:  #27272a;   /* zinc-800 */
  --console-nav-text:     #e4e4e7;   /* zinc-200 */
  --console-nav-muted:    #a1a1aa;   /* zinc-400 */
  --console-nav-accent:   #a78bfa;   /* violet-400 */

  /* ── Geometry ── */
  --console-radius-sm:  3px;
  --console-radius-md:  6px;
  --console-radius-lg:  8px;

  /* ── Spacing scale ── */
  --console-space-1:  4px;
  --console-space-2:  8px;
  --console-space-3:  12px;
  --console-space-4:  16px;
  --console-space-5:  20px;
  --console-space-6:  28px;
  --console-space-7:  40px;

  /* ── Elevation ── */
  --console-shadow-sm: 0 1px 2px var(--console-shadow-color);
  --console-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}