/**
 * Zufuk'x Design System - Variables
 * Paleta de colores y constantes de diseño
 */

:root {
    /* === COLORES PRINCIPALES === */
    --zfx-turquoise-light: #7DD3C0;
    --zfx-turquoise: #5BB5A3;
    --zfx-turquoise-dark: #4A9B8A;
    --zfx-accent: #3D8B7A;
    
    /* === FONDOS === */
    --zfx-bg-main: #FAF9F6;        /* Color hueso - fondo principal */
    --zfx-bg-white: #FFFFFF;       /* Blanco para cards */
    --zfx-bg-sidebar: #2C3E50;     /* Sidebar oscuro */
    --zfx-bg-header: #FFFFFF;      /* Header blanco */
    --zfx-bg-hover: #F0EFEB;       /* Hover sobre hueso */
    
    /* === TEXTOS === */
    --zfx-text-primary: #2C3E50;   /* Texto principal */
    --zfx-text-secondary: #7F8C8D; /* Texto secundario */
    --zfx-text-light: #FFFFFF;     /* Texto claro */
    --zfx-text-muted: #95A5A6;     /* Texto suave */
    
    /* === ESTADOS === */
    --zfx-success: #27AE60;
    --zfx-warning: #F39C12;
    --zfx-danger: #E74C3C;
    --zfx-info: #3498DB;
    
    /* === SOMBRAS === */
    --zfx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --zfx-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --zfx-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
    --zfx-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    
    /* === BORDES === */
    --zfx-border-radius-sm: 4px;
    --zfx-border-radius: 8px;
    --zfx-border-radius-lg: 12px;
    --zfx-border-color: #E5E4E0;
    
    /* === ESPACIADO === */
    --zfx-spacing-xs: 0.25rem;   /* 4px */
    --zfx-spacing-sm: 0.5rem;    /* 8px */
    --zfx-spacing-md: 1rem;      /* 16px */
    --zfx-spacing-lg: 1.5rem;    /* 24px */
    --zfx-spacing-xl: 2rem;      /* 32px */
    --zfx-spacing-2xl: 3rem;     /* 48px */
    
    /* === TIPOGRAFÍA === */
    --zfx-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --zfx-font-size-xs: 0.75rem;   /* 12px */
    --zfx-font-size-sm: 0.875rem;  /* 14px */
    --zfx-font-size-base: 1rem;    /* 16px */
    --zfx-font-size-lg: 1.125rem;  /* 18px */
    --zfx-font-size-xl: 1.25rem;   /* 20px */
    --zfx-font-size-2xl: 1.5rem;   /* 24px */
    --zfx-font-size-3xl: 2rem;     /* 32px */
    
    --zfx-font-weight-normal: 400;
    --zfx-font-weight-medium: 500;
    --zfx-font-weight-semibold: 600;
    --zfx-font-weight-bold: 700;
    
    /* === TRANSICIONES === */
    --zfx-transition: all 0.3s ease;
    --zfx-transition-fast: all 0.15s ease;
    
    /* === DIMENSIONES === */
    --zfx-sidebar-width: 250px;
    --zfx-header-height: 70px;
    --zfx-sidebar-width-collapsed: 70px;
}