/* =========================================
   THEME.CSS
   Variables Globales (CSS Custom Properties)
   ========================================= */

:root {
    /* --- 1. PALETA DE COLORES --- */
    
    --color-white:      #ffffff;
    --color-black:      #000000;
    
    /* Escala de Grises */
    --gray-100:         #bdc3c7; 
    --gray-200:         #bbbbbb; 
    --gray-300:         #aaaaaa; 
    --gray-400:         #555555; 
    --gray-500:         #444444; 
    --gray-600:         #333333; 
    --gray-700:         #222222; 
    --gray-800:         #1a1a1a; 
    --gray-900:         #111111; 

    /* Colores de Acento */
    --color-cyan:       #6feaf6;
    --color-blue-light: #7bc4ff;
    --color-blue:       #3498db;
    --color-blue-dark:  #34495e;
    --color-slate:      #2c3e50;
    --color-sky-blue:   #009ee3;
    --color-sky-dark:   #007eb5;
    --color-purple:     #9b59b6;
    
    /* Estados Semánticos */
    --color-green:      #2ecc71; 
    --color-green-dark: #27ae60;  
    --color-yellow:     #f1c40f;
    --color-orange:     #f39c12;
    --color-red:        #e74c3c; 
    --color-red-dark:   #c0392b; 

    /* --- 2. TIPOGRAFÍA --- */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono:    monospace;

    --text-xs:   0.75rem; 
    --text-sm:   0.85rem; 
    --text-base: 1rem;    
    --text-lg:   1.2rem;  
    --text-xl:   1.5rem;  
    --text-2xl:  2.5rem;  

    /* --- 3. ESPACIADO Y BORDES --- */
    --space-xxs:2px;
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 30px;

    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 20px;

    /* --- 4. EFECTOS --- */
    --shadow-sm: 0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.5);
    
    --border-width: 1px;
}