/**
 * SERVANA - Variables del Sistema
 * Colores, tamaños, espaciados
 */

:root {
    /* COLORES */
    --primary: #1a1a1a;
    --primary-light: #2d2d2d;
    --white: #ffffff;
    
    /* Grises */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    
    /* Estados */
    --success: #2ecc71;
    --success-light: #e8f5e9;
    --warning: #f39c12;
    --warning-light: #fff3e0;
    --danger: #e74c3c;
    --danger-light: #ffebee;
    --info: #3498db;
    --info-light: #e3f2fd;
    
    /* ESPACIADO */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    
    /* BORDES */
    --radius: 4px;
    --radius-lg: 8px;
    --border-color: var(--gray-300);
    
    /* SOMBRAS */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.12);
    
    /* LAYOUT */
    --sidebar-width: 260px;
    --navbar-height: 70px;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--primary);
    background: var(--gray-100);
}