/**
 * Isaflor - Sistema de Variables CSS Centralizado
 * Paleta oficial de marca y tokens de diseño globales
 *
 * Uso: Este archivo DEBE cargarse ANTES que cualquier otro CSS del sitio público.
 * Referencia en header.php como primer stylesheet.
 */

:root {
    /* ==========================================
       Brand - Primary (Naranja Oficial)
       ========================================== */
    --color-primary: #f97316;
    --color-primary-dark: #ea580c;
    --color-primary-light: #fb923c;
    --color-primary-lighter: #fdba74;
    /* Canales RGB — permiten componer rgba() dinámicamente */
    --color-primary-rgb: 249, 115, 22;
    --color-primary-dark-rgb: 234, 88, 12;
    /* Alpha variants listas para uso */
    --color-primary-3:  rgba(var(--color-primary-rgb), 0.03);
    --color-primary-5:  rgba(var(--color-primary-rgb), 0.05);
    --color-primary-8:  rgba(var(--color-primary-rgb), 0.08);
    --color-primary-12: rgba(var(--color-primary-rgb), 0.12);
    --color-primary-15: rgba(var(--color-primary-rgb), 0.15);
    --color-primary-20: rgba(var(--color-primary-rgb), 0.20);
    --color-primary-muted: rgba(var(--color-primary-rgb), 0.10);
    --color-primary-muted-dark: rgba(var(--color-primary-rgb), 0.20);
    --color-primary-shadow: rgba(var(--color-primary-rgb), 0.25);
    --color-primary-shadow-strong: rgba(var(--color-primary-rgb), 0.40);
    --color-primary-border: rgba(var(--color-primary-rgb), 0.18);
    --color-primary-border-focus: rgba(var(--color-primary-rgb), 0.35);

    /* ==========================================
       Brand - Secondary (Azul Oficial)
       ========================================== */
    --color-secondary: #2563eb;
    --color-secondary-dark: #1d4ed8;
    --color-secondary-light: #3b82f6;
    /* Canales RGB */
    --color-secondary-rgb: 37, 99, 235;
    --color-secondary-3:  rgba(var(--color-secondary-rgb), 0.03);
    --color-secondary-8:  rgba(var(--color-secondary-rgb), 0.08);
    --color-secondary-12: rgba(var(--color-secondary-rgb), 0.12);
    --color-secondary-muted: rgba(var(--color-secondary-rgb), 0.10);
    --color-secondary-shadow: rgba(var(--color-secondary-rgb), 0.30);
    --color-secondary-border: rgba(var(--color-secondary-rgb), 0.18);

    /* ==========================================
       Brand - Tertiary (Amarillo Oficial)
       ========================================== */
    --color-tertiary: #facc15;
    --color-tertiary-dark: #eab308;
    --color-tertiary-light: #fde047;
    /* Canales RGB */
    --color-tertiary-rgb: 250, 204, 21;
    --color-tertiary-muted: rgba(var(--color-tertiary-rgb), 0.15);
    --color-tertiary-shadow: rgba(var(--color-tertiary-rgb), 0.25);

    /* ==========================================
       Semánticos (Estado)
       ========================================== */
    --color-success: #10b981;
    --color-success-dark: #059669;
    --color-success-light: #34d399;
    --color-success-muted: rgba(16, 185, 129, 0.1);
    --color-success-bg: #d1fae5;

    --color-error: #ef4444;
    --color-error-dark: #dc2626;
    --color-error-light: #f87171;
    --color-error-muted: rgba(239, 68, 68, 0.1);
    --color-error-bg: #fee2e2;

    --color-warning: #f59e0b;
    --color-warning-dark: #d97706;
    --color-warning-light: #fbbf24;
    --color-warning-muted: rgba(245, 158, 11, 0.15);
    --color-warning-bg: #fef3c7;

    --color-info: #2563eb;
    --color-info-light: #3b82f6;
    --color-info-bg: #dbeafe;

    /* ==========================================
       Neutrals (Grises de la UI)
       ========================================== */
    --color-text: #1f2937;
    --color-text-light: #6b7280;
    --color-text-muted: #9ca3af;
    --color-text-subtle: #374151;

    --color-border: #f3f4f6;
    --color-border-medium: #e5e7eb;
    --color-border-strong: #d1d5db;

    --color-bg-light: #f9fafb;
    --color-bg-white: #ffffff;
    --color-bg-subtle: #f3f4f6;

    /* Oscuros para dark mode (fondo base) */
    --color-bg-dark: #111827;
    --color-bg-dark-deeper: #0f172a;
    --color-bg-dark-surface: #1f2937;
    --color-bg-dark-elevated: #374151;
    --color-bg-dark-border: #374151;
    --color-bg-dark-border-subtle: #4b5563;

    /* ==========================================
       Spacing (Escala consistente)
       ========================================== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;

    /* ==========================================
       Border Radius
       ========================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ==========================================
       Sombras (Neutras)
       ========================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.15);

    /* Sombras con color de marca */
    --shadow-primary-sm: 0 4px 12px var(--color-primary-shadow);
    --shadow-primary-md: 0 8px 20px var(--color-primary-shadow);
    --shadow-primary-lg: 0 12px 32px var(--color-primary-shadow-strong);

    --shadow-secondary-sm: 0 4px 12px var(--color-secondary-shadow);

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

    /* ==========================================
       Gradientes de Marca
       ========================================== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --gradient-primary-light: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-dark));
    --gradient-section: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-primary-bg) 100%);
    --gradient-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    /* ==========================================
       Fondos de Sección
       ========================================== */
    --color-white: #ffffff;                /* Blanco puro — texto sobre fondos con color */
    --color-primary-bg: #fef3f2;           /* Tinte naranja muy suave */
    --color-primary-muted-subtle: rgba(249, 115, 22, 0.05);  /* Más suave que muted */

    /* ==========================================
       Tipografía — Escala de Tamaños
       ========================================== */
    --font-size-xs:   12px;
    --font-size-sm:   13px;
    --font-size-base: 14px;
    --font-size-md:   15px;
    --font-size-lg:   16px;
    --font-size-xl:   17px;
    --font-size-2xl:  18px;
    --font-size-3xl:  22px;
    --font-size-4xl:  24px;
    --font-size-5xl:  28px;
    --font-size-6xl:  32px;
    --font-size-7xl:  38px;
    --font-size-8xl:  42px;

    /* ==========================================
       Tipografía — Pesos y Alturas de Línea
       ========================================== */
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    --line-height-tight:  1.2;
    --line-height-snug:   1.3;
    --line-height-normal: 1.6;

    /* ==========================================
       Espaciado de Secciones
       ========================================== */
    --section-padding-y:    100px;
    --section-padding-y-lg:  80px;
    --section-padding-y-md:  60px;
    --section-padding-y-sm:  40px;
}

/* ==========================================
   Dark Mode Overrides
   Se activa con clase .dark en <html>
   ========================================== */
.dark {
    /* Primary: naranja más claro para mejor contraste en oscuro */
    --color-primary: #fb923c;
    --color-primary-dark: #f97316;
    --color-primary-light: #fdba74;
    --color-primary-lighter: #fed7aa;
    --color-primary-muted: rgba(251, 146, 60, 0.2);
    --color-primary-muted-dark: rgba(251, 146, 60, 0.3);
    --color-primary-shadow: rgba(251, 146, 60, 0.3);
    --color-primary-shadow-strong: rgba(251, 146, 60, 0.4);

    /* Secondary: azul más claro para dark */
    --color-secondary: #3b82f6;
    --color-secondary-dark: #2563eb;
    --color-secondary-light: #60a5fa;
    --color-secondary-muted: rgba(59, 130, 246, 0.15);
    --color-secondary-shadow: rgba(59, 130, 246, 0.3);

    /* Tertiary: sin cambios significativos */
    --color-tertiary: #fde047;
    --color-tertiary-dark: #facc15;
    --color-tertiary-light: #fef08a;

    /* Semánticos dark */
    --color-success: #34d399;
    --color-success-dark: #10b981;
    --color-success-bg: #064e3b;

    --color-error: #f87171;
    --color-error-dark: #ef4444;
    --color-error-bg: #7f1d1d;

    --color-warning: #fbbf24;
    --color-warning-dark: #f59e0b;
    --color-warning-bg: #78350f;

    --color-info: #60a5fa;
    --color-info-light: #93c5fd;
    --color-info-bg: #1e3a8a;

    /* Fondos de sección dark */
    --color-primary-bg: rgba(251, 146, 60, 0.05);
    --color-primary-muted-subtle: rgba(251, 146, 60, 0.03);
    --gradient-section: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-deeper) 100%);

    /* Neutrals dark */
    --color-text: #f3f4f6;
    --color-text-light: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-subtle: #e5e7eb;

    --color-border: #374151;
    --color-border-medium: #4b5563;
    --color-border-strong: #6b7280;

    --color-bg-light: #1f2937;
    --color-bg-white: #111827;
    --color-bg-subtle: #374151;
}