/* LLM Debug & Evaluation - Design System */
:root {
  --color-bg: #FAF7F2;
  --color-bg-code: #1E1E2E;
  --color-text: #2C2A28;
  --color-text-secondary: #6B6560;
  --color-accent: #D94F30;
  --color-accent-hover: #C4432A;
  --color-accent-light: #FDEEE9;
  --color-info: #2A7B9B;
  --color-info-light: #E4F2F7;
  --color-success: #2D8B55;
  --color-success-light: #E8F5EE;
  --color-error: #C93B3B;
  --color-error-light: #FDE8E8;
  --color-border: #E5DFD6;
  --color-border-light: #EEEBE5;
  --color-surface: #FFFFFF;
  --color-surface-warm: #FDF9F3;
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --sidebar-width: 280px;
  --content-width: 800px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-bg);
}
pre, code { font-family: var(--font-mono); }
code { background: var(--color-surface-warm); padding: 2px 6px; border-radius: 4px; font-size: 0.875em; }
pre { background: var(--color-bg-code); color: #CDD6F4; padding: 1.5rem; border-radius: 12px; overflow-x: auto; margin: 1rem 0; }
pre code { background: transparent; padding: 0; }