/* Design System - Variables CSS */
/* Este archivo define todas las variables de diseño del proyecto para mantener consistencia */

:root {
    /* === COLORES === */
    
    /* Colores primarios */
    --color-primary: #667eea;
    --color-primary-dark: #5568d3;
    --color-primary-light: #7c93f0;
    
    /* Colores de texto */
    --color-text-primary: #1a202c;
    --color-text-secondary: #2d3748;
    --color-text-tertiary: #4a5568;
    --color-text-muted: #718096;
    --color-text-light: #a0aec0;
    
    /* Colores de fondo */
    --color-bg-page: #f7fafc;
    --color-bg-white: #ffffff;
    --color-bg-light: #edf2f7;
    --color-bg-lighter: #f7fafc;
    
    /* Colores de borde */
    --color-border-light: #e2e8f0;
    --color-border-medium: #cbd5e0;
    --color-border-dark: #a0aec0;
    
    /* Colores de estado */
    --color-success: #48bb78;
    --color-success-dark: #38a169;
    --color-info: #0088cc;
    --color-info-dark: #229ED9;
    --color-warning: #ed8936;
    --color-error: #f56565;
    
    /* === TIPOGRAFÍA === */
    
    /* Font Family */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.85rem;      /* 13.6px */
    --font-size-base: 0.95rem;    /* 15.2px */
    --font-size-md: 1rem;         /* 16px */
    --font-size-lg: 1.1rem;       /* 17.6px */
    --font-size-xl: 1.3rem;       /* 20.8px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 2.5rem;      /* 40px */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.3;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.85;
    
    /* === HEADINGS === */
    
    /* H1 */
    --h1-font-size: var(--font-size-4xl);
    --h1-font-weight: var(--font-weight-bold);
    --h1-line-height: var(--line-height-tight);
    --h1-color: var(--color-text-primary);
    --h1-margin-bottom: 20px;
    
    /* H2 */
    --h2-font-size: var(--font-size-3xl);
    --h2-font-weight: var(--font-weight-bold);
    --h2-line-height: var(--line-height-tight);
    --h2-color: var(--color-text-primary);
    --h2-margin-top: 45px;
    --h2-margin-bottom: 20px;
    
    /* H3 */
    --h3-font-size: var(--font-size-2xl);
    --h3-font-weight: var(--font-weight-semibold);
    --h3-line-height: 1.4;
    --h3-color: var(--color-text-secondary);
    --h3-margin-top: 35px;
    --h3-margin-bottom: 15px;
    
    /* H4 */
    --h4-font-size: 1.25rem;
    --h4-font-weight: var(--font-weight-semibold);
    --h4-line-height: 1.4;
    --h4-color: var(--color-text-tertiary);
    --h4-margin-top: 30px;
    --h4-margin-bottom: 12px;
    
    /* === ESPACIADO === */
    
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* === BORDES === */
    
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-xl: 12px;
    
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    
    /* === SOMBRAS === */
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* === TRANSICIONES === */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* === CONTENEDORES === */
    
    --container-max-width: 1200px;
    --content-max-width: 800px;
    --sidebar-width: 300px;
}