/**
 * CSS Custom Properties / Variables de Identidad Institucional
 * H. Ayuntamiento de Escárcega (2024–2027)
 * Fuente única de verdad cromática
 */
:root {
    /* Identidad principal */
    --brand-wine: #790B27;
    --brand-wine-hover: #681022;
    --brand-wine-dark: #571124;
    --brand-wine-deep: #3F0F1E;

    /* Textos */
    --brand-navy: #111D33;
    --text-primary: #111D33;
    --text-secondary: #5F6673;
    --text-muted: #777D87;

    /* Fondos */
    --surface: #FFFFFF;
    --surface-soft: #F8F6F7;
    --surface-wine-soft: #F7ECEF;

    /* Bordes */
    --border: #E5DEE1;
    --border-light: #EEE9EB;

    /* Colores secundarios de la identidad */
    --brand-green: #28624F;
    --brand-gold: #D2A13A;

    /* Estados */
    --focus: #790B27;

    /* Alias de compatibilidad institucional */
    --color-primary: var(--brand-wine);
    --color-primary-rgb: 121, 11, 39;
    --color-primary-dark: var(--brand-wine-dark);
    --color-primary-light: var(--brand-wine-hover);
    --color-primary-soft: var(--surface-wine-soft);
    --color-primary-border: var(--border);

    --color-secondary: var(--brand-navy);
    --color-secondary-dark: var(--brand-wine-deep);

    --color-green: var(--brand-green);
    --color-green-light: #EBF7F2;

    --color-yellow: var(--brand-gold);
    --color-yellow-light: #FEF3C7;

    --color-text: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-text-light: var(--text-muted);
    --color-text-white: var(--surface);

    --color-background: var(--surface);
    --color-background-alt: var(--surface-soft);
    --color-background-card: var(--surface);
    --color-footer-bg: var(--brand-wine-dark);
    --color-footer-bottom: var(--brand-wine-deep);

    --color-border: var(--border);
    --color-border-light: var(--border-light);
    --color-border-strong: #D1C7CA;

    /* Tipografía */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */

    /* Dimensiones de Contenedor */
    --container-width: 1240px;
    --container-padding: clamp(1rem, 3vw, 2rem);

    /* Radios de Esquina */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Sombras Elevadas */
    --shadow-xs: 0 1px 2px rgba(17, 29, 51, 0.04);
    --shadow-sm: 0 1px 3px rgba(17, 29, 51, 0.06), 0 1px 2px rgba(17, 29, 51, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(17, 29, 51, 0.07), 0 2px 4px -1px rgba(17, 29, 51, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(17, 29, 51, 0.08), 0 4px 6px -2px rgba(17, 29, 51, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(17, 29, 51, 0.1), 0 10px 10px -5px rgba(17, 29, 51, 0.04);
    --shadow-card-hover: 0 6px 20px rgba(17, 29, 51, 0.08);

    /* Transiciones */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}