/* design-system.css — Shoolini AI Panel
   Tokens + resets + base typography.
   Load via: {% static 'css/design-system.css' %}
   NEVER inline these tokens in templates. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --bg:        #1a1a1a;
  --bg-2:      #222222;
  --bg-3:      #2d2d2d;
  --border:    rgba(255,255,255,0.10);
  --border-hi: rgba(255,255,255,0.20);
  --accent:    #6366f1;
  --accent-hi: #818cf8;
  --accent-bg: rgba(99,102,241,0.12);
  --green:  #10b981;
  --yellow: #f59e0b;
  --red:    #ef4444;
  --blue:   #3b82f6;
  --green-bg:  rgba(16, 185, 129, 0.1);
  --yellow-bg: rgba(245, 158, 11, 0.1);
  --red-bg:    rgba(239, 68, 68, 0.1);
  --blue-bg:   rgba(59, 130, 246, 0.1);
  --text-1: #f0f0f0;
  --text-2: #d4d4d4;
  --text-3: #888888;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px; --sp-16:64px;
  --r-sm:6px; --r-md:10px; --r-full:9999px;
  --sidebar-w:220px; --topbar-h:56px;
  --t:0.15s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height:100%;
  background:var(--bg);
  color:var(--text-2);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }

.mono { font-family:'Geist Mono',monospace; }