/**
 * DISEÑO DE SISTEMA - VARIABLES CSS
 * Contiene los tokens de diseño globales: paleta de colores HSL, tipografías,
 * sombras, bordes y transiciones. Soporta temas dinámicos.
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800&family=Quicksand:wght@400;600;700&display=swap');

:root {
    /* Familia de Fuentes (Estilo Stitch) */
    --font-heading: 'Quicksand', sans-serif;
    --font-body: 'Nunito Sans', sans-serif;

    /* Paleta HSL del proyecto Stitch (Verde Deep, Indigo Purple y Terracotta) */
    --primary-h: 161;
    --primary-s: 100%;
    --primary-l: 21%;
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); /* #006c49 */
    --primary-light: rgba(0, 108, 73, 0.1);
    --primary-hover: hsl(var(--primary-h), var(--primary-s), 15%);

    --secondary-h: 260;
    --secondary-s: 65%;
    --secondary-l: 53%;
    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)); /* #6b38d4 */
    --secondary-light: rgba(107, 56, 212, 0.1);

    --accent-h: 10;
    --accent-s: 71%;
    --accent-l: 62%;
    --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); /* Terracotta #E2725B */
    --accent-light: rgba(226, 114, 91, 0.1);

    /* Colores Adicionales del Proyecto Stitch */
    --primary-container: #10b981;
    --secondary-container: #8455ef;
    --cognitive-blue: #3B82F6;
    --tertiary: #bc0b3b;
    --tertiary-fixed: #ffdadb;
    --on-tertiary-container: #780021;
    --soft-coral: #FDA4AF;
    --on-primary-container: #00422b;

    /* Colores Neutros (Estilo Stitch) */
    --bg-light: #f9f9ff; /* Fondo muy claro y limpio */
    --bg-surface: #ffffff;
    --text-primary: #151c27;
    --text-secondary: #3c4a42;
    --text-muted: #6c7a71;
    --border-color: #bbcabf;

    /* Feedback Estático */
    --success: #10b981;
    --success-light: #ecfdf5;
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --info: #3b82f6;
    --info-light: #eff6ff;

    /* Sombras y Glassmorphism */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: blur(12px);

    /* Medidas Estructurales (Estilo Stitch) */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 32px; /* 2rem para tarjetas extra redondeadas premium */
    --radius-full: 9999px;
    
    --sidebar-width: 260px;
    --header-height: 70px;

    /* Transiciones */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modo Cocina (Accesibilidad tipográfica extrema) */
body.kitchen-mode {
    --font-size-multiplier: 1.35;
}

/* Modo Oscuro Global */
body.dark-mode {
    --bg-light: #0b0f19;
    --bg-surface: #111827;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #1e293b;
    
    --primary-light: hsl(var(--primary-h), 30%, 15%);
    --glass-bg: rgba(17, 24, 39, 0.8);
    --glass-border: rgba(30, 41, 59, 0.5);
    
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}