/* variables.css - Diseño y Tokens de Identidad de PromptHub */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* Paleta Oficial - Manual de Identidad (Modo Claro por Defecto) */
    --color-primary: #2563EB;        /* Azul tecnológico */
    --color-accent: #06B6D4;         /* Cian acento */
    --color-ai: #7C3AED;             /* Violeta IA */
    
    --bg-main: #F8FAFC;              /* Gris claro fondo */
    --bg-card: #FFFFFF;              /* Blanco */
    --bg-header: #0F172A;            /* Gris oscuro base */
    
    --text-main: #0F172A;            /* Gris oscuro base */
    --text-muted: #475569;           /* Gris medio */
    --text-light: #FFFFFF;           /* Blanco */
    
    --border-color: #E2E8F0;         /* Gris claro para bordes */
    --input-bg: #FFFFFF;
    
    /* Estados y Colores Auxiliares */
    --color-success: #10B981;
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    
    /* Efectos y Sombras */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
    
    /* Bordes y Transiciones */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    
    /* Fuentes */
    --font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* Variables para el Modo Oscuro */
[data-theme="dark"] {
    --bg-main: #090D16;              /* Fondo ultra oscuro tecnológico */
    --bg-card: #131A26;              /* Gris azulado oscuro */
    --bg-header: #070B12;            /* Cabecera oscura */
    
    --text-main: #F1F5F9;            /* Blanco grisáceo */
    --text-muted: #94A3B8;           /* Gris claro silenciado */
    
    --border-color: #1E293B;         /* Borde oscuro */
    --input-bg: #1E293B;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.5);
}