/**
 * Sistema de Diseño - Posadas Informa
 * Paleta: BLANCO (fondo) + NEGRO (texto) + ROJO (énfasis)
 */

:root {
    /* ========== PALETA PRINCIPAL: BLANCO - NEGRO - ROJO ========== */

    /* ROJO - Color de marca y énfasis */
    --pi-red: #e60023;
    /* Rojo principal */
    --pi-red-dark: #b3001b;
    /* Rojo oscuro - Hover */
    --pi-red-light: #ff1744;
    /* Rojo claro - Acentos suaves */
    --pi-red-pale: #ffe5e9;
    /* Rojo muy claro - Fondos destacados */

    /* NEGRO - Texto principal */
    --pi-black: #000000;
    /* Negro puro - Títulos */
    --pi-black-soft: #1a1a1a;
    /* Negro suave - Texto principal */
    --pi-black-light: #333333;
    /* Negro claro - Texto secundario */

    /* BLANCO - Fondos */
    --pi-white: #ffffff;
    /* Blanco puro - Fondo principal */
    --pi-white-soft: #fafafa;
    /* Blanco suave - Fondos alternos */

    /* GRISES - Solo para bordes y separadores */
    --pi-gray-border: #e0e0e0;
    /* Bordes sutiles */
    --pi-gray-divider: #f0f0f0;
    /* Divisores */
    --pi-gray-text: #666666;
    /* Texto terciario (usar con moderación) */

    /* ========== ALIAS SEMÁNTICOS ========== */
    --pi-primary: var(--pi-red);
    --pi-primary-dark: var(--pi-red-dark);
    --pi-primary-light: var(--pi-red-light);

    --pi-text: var(--pi-black-soft);
    --pi-text-heading: var(--pi-black);
    --pi-text-secondary: var(--pi-black-light);
    --pi-text-muted: var(--pi-gray-text);

    --pi-bg: var(--pi-white);
    --pi-bg-alt: var(--pi-white-soft);

    --pi-border: var(--pi-gray-border);
    --pi-divider: var(--pi-gray-divider);

    /* ========== COLORES SEMÁNTICOS (solo cuando sea necesario) ========== */
    --pi-success: #28a745;
    /* Verde - Éxito */
    --pi-warning: #ffc107;
    /* Amarillo - Advertencia */
    --pi-danger: var(--pi-red);
    /* Usar rojo de marca para errores */
    --pi-info: var(--pi-black-light);
    /* Usar negro para información */

    /* ========== REDES SOCIALES ========== */
    --pi-facebook: #1877f2;
    --pi-twitter: #000000;
    --pi-whatsapp: #25d366;
    --pi-linkedin: #0077b5;
    --pi-telegram: #0088cc;

    /* ========== SOMBRAS (sutiles, en negro) ========== */
    --pi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --pi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --pi-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --pi-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
    --pi-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12);

    /* Sombras con color rojo (para énfasis) */
    --pi-shadow-red: 0 4px 12px rgba(230, 0, 35, 0.15);
    --pi-shadow-red-lg: 0 8px 20px rgba(230, 0, 35, 0.20);

    /* ========== BORDES ========== */
    --pi-border-radius-sm: 4px;
    --pi-border-radius: 8px;
    --pi-border-radius-md: 12px;
    --pi-border-radius-lg: 16px;
    --pi-border-radius-xl: 24px;
    --pi-border-radius-full: 9999px;

    --pi-border-width: 1px;
    --pi-border-color: var(--pi-border);
    --pi-border-style: var(--pi-border-width) solid var(--pi-border-color);

    /* ========== ESPACIADO ========== */
    --pi-spacing-xs: 4px;
    --pi-spacing-sm: 8px;
    --pi-spacing-md: 16px;
    --pi-spacing-lg: 24px;
    --pi-spacing-xl: 32px;
    --pi-spacing-2xl: 48px;
    --pi-spacing-3xl: 64px;

    /* ========== TIPOGRAFÍA ========== */
    --pi-font-family-base: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pi-font-family-heading: 'Lora', Georgia, serif;
    --pi-font-family-mono: 'Roboto Mono', 'Courier New', monospace;

    --pi-font-size-xs: 0.75rem;
    /* 12px */
    --pi-font-size-sm: 0.875rem;
    /* 14px */
    --pi-font-size-base: 1rem;
    /* 16px */
    --pi-font-size-md: 1.125rem;
    /* 18px */
    --pi-font-size-lg: 1.25rem;
    /* 20px */
    --pi-font-size-xl: 1.5rem;
    /* 24px */
    --pi-font-size-2xl: 2rem;
    /* 32px */
    --pi-font-size-3xl: 2.5rem;
    /* 40px */

    --pi-font-weight-light: 300;
    --pi-font-weight-normal: 400;
    --pi-font-weight-medium: 500;
    --pi-font-weight-semibold: 600;
    --pi-font-weight-bold: 700;
    --pi-font-weight-extrabold: 800;
    --pi-font-weight-black: 900;

    --pi-line-height-tight: 1.2;
    --pi-line-height-normal: 1.5;
    --pi-line-height-relaxed: 1.7;
    --pi-line-height-loose: 2;

    /* ========== TRANSICIONES ========== */
    --pi-transition-fast: 0.15s ease;
    --pi-transition-base: 0.3s ease;
    --pi-transition-slow: 0.5s ease;
    --pi-transition-cubic: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ========== Z-INDEX ========== */
    --pi-z-dropdown: 1000;
    --pi-z-sticky: 1020;
    --pi-z-fixed: 1030;
    --pi-z-modal-backdrop: 1040;
    --pi-z-modal: 1050;
    --pi-z-popover: 1060;
    --pi-z-tooltip: 1070;

    /* ========== BREAKPOINTS (para referencia en JS) ========== */
    --pi-breakpoint-xs: 0;
    --pi-breakpoint-sm: 576px;
    --pi-breakpoint-md: 768px;
    --pi-breakpoint-lg: 992px;
    --pi-breakpoint-xl: 1200px;
    --pi-breakpoint-2xl: 1400px;
}


/* ========== CLASES UTILITARIAS DE COLOR ========== */

/* Colores de texto */
.text-primary {
    color: var(--pi-primary) !important;
}

.text-dark {
    color: var(--pi-black) !important;
}

.text-muted {
    color: var(--pi-gray-600) !important;
}

.text-white {
    color: var(--pi-white) !important;
}

/* Colores de fondo */
.bg-primary {
    background-color: var(--pi-primary) !important;
}

.bg-white {
    background-color: var(--pi-white) !important;
}

.bg-light {
    background-color: var(--pi-gray-50) !important;
}

.bg-dark {
    background-color: var(--pi-black) !important;
}

/* Bordes */
.border-primary {
    border-color: var(--pi-primary) !important;
}

.border-light {
    border-color: var(--pi-gray-200) !important;
}


/* ========== COMPATIBILIDAD CON VARIABLES ANTIGUAS ========== */
:root {
    /* Mapeo de variables antiguas a nueva paleta simplificada */
    --color-primary: var(--pi-red);
    --color-primary-dark: var(--pi-red-dark);
    --color-dark: var(--pi-black-soft);
    --color-gray: var(--pi-black-light);
    --color-gray-light: var(--pi-white-soft);
    --color-border: var(--pi-gray-border);
    --color-text: var(--pi-text);
    --color-text-light: var(--pi-text-muted);
    --shadow-sm: var(--pi-shadow-sm);
    --shadow-md: var(--pi-shadow-md);
    --shadow-lg: var(--pi-shadow-lg);
    --transition: var(--pi-transition-base);
    --border-radius: var(--pi-border-radius);

    /* Mapeo de grises antiguos a nueva paleta */
    --pi-gray-900: var(--pi-black-soft);
    --pi-gray-800: var(--pi-black-light);
    --pi-gray-700: var(--pi-black-light);
    --pi-gray-600: var(--pi-gray-text);
    --pi-gray-500: var(--pi-gray-text);
    --pi-gray-400: var(--pi-gray-text);
    --pi-gray-300: var(--pi-gray-border);
    --pi-gray-200: var(--pi-gray-border);
    --pi-gray-100: var(--pi-gray-divider);
    --pi-gray-50: var(--pi-white-soft);
}