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

:root {
  --color-primary:      #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-success:      #16a34a;
  --color-warning:      #ca8a04;
  --color-error:        #dc2626;
  --color-text:         #111827;
  --color-text-muted:   #6b7280;
  --color-border:       #e5e7eb;
  --color-bg:           #f9fafb;
  --color-bg-card:      #ffffff;
  --color-sidebar-bg:   #1e293b;
  --color-sidebar-text: #f1f5f9;
  --color-sidebar-muted:#94a3b8;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07);

  --font-ui:   ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', monospace;
}

html, body {
  height: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--font-mono); }