:root {
    /* Colores principales */
    --color-bg: #FFFFFF;
    --color-surface: #F8F9FA;
    --color-surface-hover: #F0F1F3;
    --color-border: #E0E0E0;
    --color-border-light: #EEEEEE;

    /* Texto */
    --color-text: #212121;
    --color-text-secondary: #757575;
    --color-text-muted: #9E9E9E;
    --color-text-inverse: #FFFFFF;

    /* Primario (azul) */
    --color-primary: #1976D2;
    --color-primary-hover: #1565C0;
    --color-primary-light: #E3F2FD;
    --color-primary-bg: #BBDEFB;

    /* Estados */
    --color-danger: #D32F2F;
    --color-danger-hover: #C62828;
    --color-danger-light: #FFEBEE;
    --color-success: #388E3C;
    --color-success-light: #E8F5E9;
    --color-warning: #F57C00;
    --color-warning-light: #FFF3E0;
    --color-info: #0288D1;
    --color-info-light: #E1F5FE;

    /* Forma shapes */
    --color-banda: #7B1FA2;
    --color-l-shape: #00838F;
    --color-tabla: #2E7D32;

    /* Layout */
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

    /* Tipografía */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    /* Transiciones */
    --transition: 150ms ease;
    --transition-slow: 300ms ease;
}