/* 2. FILE: frontend/src/index.css (Global styles and variables) */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  
  --color-bg: #111827;
  --color-bg-light: #1f2937;
  --color-bg-lighter: #374151;
  --color-border: #4b5563;
  --color-text: #d1d5db;
  --color-text-muted: #9ca3af;
  
  --color-primary: #2dd4bf;
  --color-primary-hover: #5eead4;
  --color-secondary: #3b82f6;
  --color-success: #4ade80;
  --color-warning: #facc15;
  --color-error: #f87171;
  --color-danger: #ef4444;
  --color-danger-hover: #b91c1c;

  --border-radius: 0.5rem;
  --transition-speed: 0.2s;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
