:root {
  /* Color */
  --color-bg:            #f5f6fa;
  --color-surface:       #ffffff;
  --color-border:        #e2e5ec;
  --color-text:          #1a1d2e;
  --color-text-muted:    #6b7280;
  --color-primary:       #6aa0f8;
  --color-primary-light: #eef2ff;
  --color-ok:            #16a34a;
  --color-danger:        #dc2626;
  --color-warn:          #d97706;

  --color-surface-code:  #0e1117;

  /* Sidebar (dark surface) */
  --color-sidebar-bg:     #1e2235;
  --color-sidebar-fg:     #c8cde0;
  --color-sidebar-muted:  #6b7a9a;
  --color-sidebar-active: #3b82f6;
  --color-sidebar-hover:  rgba(255,255,255,.07);

  /* Spacing — 8px base scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Typography */
  --font-sans: system-ui, Segoe UI, Roboto, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Elevation */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.15);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.2);

  /* Layout */
  --sidebar-w: 200px;
  --chat-w:    300px;
  --topbar-h:  52px;
}