/**
 * Demo app styles - separate from atproto-ui component styles
 * This demonstrates that atproto-ui components work well within
 * apps that have their own theming system.
 */

/* Root styles for the demo app */
body {
  margin: 0;
  padding: 0;
  background: var(--demo-bg);
  color: var(--demo-text);
  transition: background-color 200ms ease, color 200ms ease;
}

:root {
  /* Light theme for demo app */
  --demo-bg: #eeeeee;
  --demo-text: #1a1a1a;
  --demo-text-secondary: #666;
  --demo-border: #ddd;
  --demo-input-bg: #fff;
  --demo-button-bg: #0066cc;
  --demo-button-text: #fff;
  --demo-code-bg: #f5f5f5;
  --demo-code-border: #e0e0e0;
  --demo-hr: #e0e0e0;
}

/* Dark theme for demo app */
[data-theme="dark"] {
  --demo-bg: #1a1a1a;
  --demo-text: #e0e0e0;
  --demo-text-secondary: #999;
  --demo-border: #444;
  --demo-input-bg: #2a2a2a;
  --demo-button-bg: #0066cc;
  --demo-button-text: #fff;
  --demo-code-bg: #2a2a2a;
  --demo-code-border: #444;
  --demo-hr: #444;
}

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="system"] {
    --demo-bg: #1a1a1a;
    --demo-text: #e0e0e0;
    --demo-text-secondary: #999;
    --demo-border: #444;
    --demo-input-bg: #2a2a2a;
    --demo-button-bg: #0066cc;
    --demo-button-text: #fff;
    --demo-code-bg: #2a2a2a;
    --demo-code-border: #444;
    --demo-hr: #444;
  }
}