/**
 * ============================================================================
 * PORTAL INSTITUCIONAL COBAEM - VARIABLES GLOBALES Y TEMA INSTITUCIONAL
 * Archivo: assets/css/variables.css
 * ============================================================================
 *
 * INSTRUCCIONES PARA CAMBIAR EL COLOR INSTITUCIONAL:
 * Para actualizar la identidad cromática de todo el portal sin modificar
 * otros archivos CSS, edite únicamente las siguientes variables en :root:
 *
 *   1. --color-primary        -> Color institucional principal (actual: Guinda #7A1635)
 *   2. --color-primary-hover  -> Variante más oscura para estados :hover y :active
 *   3. --color-primary-light  -> Variante suave para fondos de énfasis y focos
 *   4. --color-accent         -> Color secundario de apoyo o detalle institucional
 * ============================================================================
 */

:root {
    /* Paleta Institucional Principal (Guinda Gubernamental) */
    --color-primary: #7A1635;
    --color-primary-hover: #5D1028;
    --color-primary-light: #F9EFF2;
    --color-primary-focus: rgba(122, 22, 53, 0.28);
    --color-accent: #B38E5D;

    /* Colores Neutros y de Superficie */
    --color-secondary: #333333;
    --color-background: #FFFFFF;
    --color-surface: #F5F5F5;
    --color-surface-alt: #FAFAFA;
    --color-text: #252525;
    --color-text-muted: #595959; /* Contraste AA garantizado sobre blanco y #F5F5F5 */
    --color-border: #E2E2E2;
    --color-footer: #252525;
    --color-footer-text: #FFFFFF;
    --color-footer-muted: #CCCCCC;

    /* Estados Semánticos */
    --color-status-info: #2C5282;
    --color-status-warning: #975A16;

    /* Tipografía */
    --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;       /* 16px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.375rem;     /* 22px */
    --font-size-2xl: 1.75rem;     /* 28px */
    --line-height-base: 1.6;
    --line-height-heading: 1.25;

    /* Espaciado y Dimensiones */
    --container-max-width: 1200px;
    --header-height: 4.75rem;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;

    /* Sombras discretas (estética minimalista) */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-dropdown: 0 6px 16px rgba(0, 0, 0, 0.08);

    /* Transiciones */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slide: 500ms ease-in-out;
}