/* ============================================
   BASE.CSS - CSS Variables, Reset, Typography
   ============================================ */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables - Design System */
:root {
    /* v0 Design System Colors */
    --v0-background-100: #fafafa;
    --v0-background-200: #f5f5f5;
    --v0-background-300: #f0f0f0;
    --v0-gray-100: #f5f5f5;
    --v0-gray-200: #e5e5e5;
    --v0-gray-300: #d4d4d4;
    --v0-gray-400: #a3a3a3;
    --v0-gray-500: #737373;
    --v0-gray-700: #404040;
    --v0-gray-800: #262626;
    --v0-gray-900: #15365C;
    --v0-gray-1000: #15365C;
    --v0-alpha-400: rgba(0, 0, 0, 0.05);
    --v0-blue-300: #93c5fd;
    --v0-blue-900: #1e3a8a;
    --v0-amber-500: #f59e0b;
    
    /* Legacy support */
    --primary: #1E88E5;
    --accent: #F4C430;
    --background: var(--v0-background-200);
    --foreground: var(--v0-gray-1000);
    --card: #ffffff;
    --border: var(--v0-gray-200);
    --muted: var(--v0-gray-500);
}

/* Dark Mode Variables */
.dark {
    --v0-background-100: #1a1a1a;
    --v0-background-200: #0f0f0f;
    --v0-background-300: #0a0a0a;
    --v0-gray-100: #262626;
    --v0-gray-200: #404040;
    --v0-gray-300: #525252;
    --v0-gray-400: #737373;
    --v0-gray-500: #737373;
    --v0-gray-700: #a3a3a3;
    --v0-gray-800: #d4d4d4;
    --v0-gray-900: #e5e5e5;
    --v0-gray-1000: #fafafa;
    --v0-alpha-400: rgba(255, 255, 255, 0.05);
    
    --background: var(--v0-background-200);
    --foreground: var(--v0-gray-1000);
    --card: var(--v0-gray-100);
    --border: var(--v0-gray-300);
    --muted: var(--v0-gray-500);
}

/* Typography & Body */
body {
    font-family:  Roboto, Oswald, sans-serif;
    background-color: var(--v0-background-200);
    color: var(--v0-gray-1000);
    transition: all 0.3s ease;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.live-indicator {
    animation: pulse 2s infinite;
}