/* ==========================================================
   HUÁNUCO REGIÓN — MICROSITIO LEGAL
   Archivo: variables.css
   Ruta: /legales/assets/css/variables.css
   Versión: 1.0
   ========================================================== */

:root {
    /* ======================================================
       COLORES INSTITUCIONALES
       ====================================================== */

    --tr-color-primary: #9f1724;
    --tr-color-primary-dark: #74111b;
    --tr-color-primary-darker: #520b13;
    --tr-color-primary-light: #c5303e;
    --tr-color-primary-soft: #f8e9eb;
    --tr-color-secondary: #d6a538;
    --tr-color-secondary-dark: #a87916;
    --tr-color-secondary-light: #efd48f;
    --tr-color-secondary-soft: #fff8e7;
    --tr-color-accent: #e53e4f;
    --tr-color-accent-dark: #bb2433;
    /* ======================================================
       COLORES NEUTROS
       ====================================================== */

    --tr-color-white: #ffffff;
    --tr-color-black: #111111;
    --tr-color-gray-50: #fafafa;
    --tr-color-gray-100: #f5f5f5;
    --tr-color-gray-150: #f0f0f1;
    --tr-color-gray-200: #e7e7e9;
    --tr-color-gray-300: #d5d5d8;
    --tr-color-gray-400: #aaaaaf;
    --tr-color-gray-500: #7b7b82;
    --tr-color-gray-600: #606066;
    --tr-color-gray-700: #45454a;
    --tr-color-gray-800: #2c2c30;
    --tr-color-gray-900: #1c1c1f;
    --tr-color-gray-950: #101012;
    /* ======================================================
       COLORES SEMÁNTICOS
       ====================================================== */

    --tr-color-success: #198754;
    --tr-color-success-dark: #11633d;
    --tr-color-success-soft: #e8f6ee;
    --tr-color-info: #1769aa;
    --tr-color-info-dark: #104d7d;
    --tr-color-info-soft: #eaf4fb;
    --tr-color-warning: #a66a00;
    --tr-color-warning-dark: #754b00;
    --tr-color-warning-soft: #fff5db;
    --tr-color-danger: #c62828;
    --tr-color-danger-dark: #8f1c1c;
    --tr-color-danger-soft: #fdecec;
    /* ======================================================
       FONDOS
       ====================================================== */

    --tr-background-page: #f6f6f7;
    --tr-background-surface: #ffffff;
    --tr-background-muted: #f1f1f3;
    --tr-background-elevated: #ffffff;
    --tr-background-dark: #64101a;
    --tr-background-primary-gradient: linear-gradient( 135deg, var(--tr-color-primary-darker) 0%, var(--tr-color-primary-dark) 45%, var(--tr-color-primary) 100% );
    --tr-background-soft-gradient: linear-gradient( 180deg, var(--tr-color-white) 0%, var(--tr-background-page) 100% );
    --tr-background-hero-overlay: linear-gradient( 115deg, rgba(82, 11, 19, 0.98) 0%, rgba(116, 17, 27, 0.96) 52%, rgba(159, 23, 36, 0.92) 100% );
    /* ======================================================
       TEXTOS
       ====================================================== */

    --tr-text-primary: #242426;
    --tr-text-secondary: #55555b;
    --tr-text-muted: #75757c;
    --tr-text-light: #f8f8f8;
    --tr-text-on-primary: #ffffff;
    --tr-text-link: var(--tr-color-primary);
    --tr-text-link-hover: var(--tr-color-primary-dark);
    /* ======================================================
       BORDES
       ====================================================== */

    --tr-border-color: #e1e1e4;
    --tr-border-color-strong: #c9c9ce;
    --tr-border-color-light: rgba(255, 255, 255, 0.18);
    --tr-border-color-primary: rgba(159, 23, 36, 0.25);
    --tr-border-width: 1px;
    --tr-border-width-medium: 2px;
    --tr-border-width-strong: 4px;
    /* ======================================================
       TIPOGRAFÍAS
       ====================================================== */

    --tr-font-family-primary: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tr-font-family-heading: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tr-font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    /* ======================================================
       PESOS TIPOGRÁFICOS
       ====================================================== */

    --tr-font-weight-light: 300;
    --tr-font-weight-regular: 400;
    --tr-font-weight-medium: 500;
    --tr-font-weight-semibold: 600;
    --tr-font-weight-bold: 700;
    --tr-font-weight-extrabold: 800;
    --tr-font-weight-black: 900;
    /* ======================================================
       TAMAÑOS TIPOGRÁFICOS
       ====================================================== */

    --tr-font-size-2xs: 0.6875rem;
    --tr-font-size-xs: 0.75rem;
    --tr-font-size-sm: 0.875rem;
    --tr-font-size-base: 1rem;
    --tr-font-size-md: 1.0625rem;
    --tr-font-size-lg: 1.125rem;
    --tr-font-size-xl: 1.25rem;
    --tr-font-size-2xl: 1.5rem;
    --tr-font-size-3xl: 1.875rem;
    --tr-font-size-4xl: 2.25rem;
    --tr-font-size-5xl: 3rem;
    --tr-font-size-6xl: 3.75rem;
    --tr-font-size-page-title: clamp(2.2rem, 6vw, 4.5rem);
    --tr-font-size-section-title: clamp(1.55rem, 3vw, 2.1rem);
    --tr-font-size-card-title: clamp(1.05rem, 2vw, 1.25rem);
    /* ======================================================
       ALTURA DE LÍNEA
       ====================================================== */

    --tr-line-height-none: 1;
    --tr-line-height-tight: 1.15;
    --tr-line-height-heading: 1.22;
    --tr-line-height-normal: 1.5;
    --tr-line-height-relaxed: 1.7;
    --tr-line-height-loose: 1.85;
    /* ======================================================
       ESPACIADOS
       Escala base de 4 píxeles
       ====================================================== */

    --tr-space-0: 0;
    --tr-space-1: 0.25rem;
    --tr-space-2: 0.5rem;
    --tr-space-3: 0.75rem;
    --tr-space-4: 1rem;
    --tr-space-5: 1.25rem;
    --tr-space-6: 1.5rem;
    --tr-space-7: 1.75rem;
    --tr-space-8: 2rem;
    --tr-space-9: 2.25rem;
    --tr-space-10: 2.5rem;
    --tr-space-12: 3rem;
    --tr-space-14: 3.5rem;
    --tr-space-16: 4rem;
    --tr-space-20: 5rem;
    --tr-space-24: 6rem;
    --tr-space-28: 7rem;
    --tr-space-32: 8rem;
    /* ======================================================
       RADIOS
       ====================================================== */

    --tr-radius-none: 0;
    --tr-radius-xs: 0.25rem;
    --tr-radius-sm: 0.5rem;
    --tr-radius-md: 0.75rem;
    --tr-radius-lg: 1rem;
    --tr-radius-xl: 1.25rem;
    --tr-radius-2xl: 1.5rem;
    --tr-radius-3xl: 2rem;
    --tr-radius-full: 9999px;
    /* ======================================================
       SOMBRAS
       ====================================================== */

    --tr-shadow-xs: 0 1px 2px rgba(28, 28, 31, 0.05);
    --tr-shadow-sm: 0 4px 12px rgba(43, 18, 21, 0.06);
    --tr-shadow-md: 0 10px 30px rgba(43, 18, 21, 0.08);
    --tr-shadow-lg: 0 18px 50px rgba(43, 18, 21, 0.1);
    --tr-shadow-xl: 0 28px 70px rgba(43, 18, 21, 0.14);
    --tr-shadow-primary: 0 14px 34px rgba(159, 23, 36, 0.24);
    --tr-shadow-focus: 0 0 0 4px rgba(159, 23, 36, 0.16);
    /* ======================================================
       ANCHOS DE CONTENEDORES
       ====================================================== */

    --tr-container-xs: 42rem;
    --tr-container-sm: 48rem;
    --tr-container-md: 62rem;
    --tr-container-lg: 74rem;
    --tr-container-xl: 82rem;
    --tr-container-main: 74rem;
    --tr-container-document: 56rem;
    --tr-sidebar-width: 18rem;
    /* ======================================================
       ALTURAS Y TAMAÑOS DE COMPONENTES
       ====================================================== */

    --tr-header-height: 4.75rem;
    --tr-header-height-mobile: 4rem;
    --tr-button-height-sm: 2.25rem;
    --tr-button-height-md: 2.75rem;
    --tr-button-height-lg: 3.125rem;
    --tr-icon-size-sm: 1rem;
    --tr-icon-size-md: 1.25rem;
    --tr-icon-size-lg: 1.5rem;
    --tr-icon-size-xl: 2rem;
    /* ======================================================
       TRANSICIONES
       ====================================================== */

    --tr-transition-fast: 150ms ease;
    --tr-transition-base: 220ms ease;
    --tr-transition-slow: 350ms ease;
    --tr-transition-colors: color var(--tr-transition-base), background-color var(--tr-transition-base), border-color var(--tr-transition-base);
    --tr-transition-transform: transform var(--tr-transition-base);
    --tr-transition-interactive: color var(--tr-transition-base), background-color var(--tr-transition-base), border-color var(--tr-transition-base), box-shadow var(--tr-transition-base), transform var(--tr-transition-base);
    /* ======================================================
       CAPAS
       ====================================================== */

    --tr-z-base: 1;
    --tr-z-dropdown: 100;
    --tr-z-sticky: 200;
    --tr-z-header: 300;
    --tr-z-overlay: 400;
    --tr-z-modal: 500;
    --tr-z-toast: 600;
    --tr-z-tooltip: 700;
    /* ======================================================
       OPACIDADES
       ====================================================== */

    --tr-opacity-disabled: 0.55;
    --tr-opacity-muted: 0.72;
    --tr-opacity-overlay: 0.68;
    /* ======================================================
       CONFIGURACIÓN DE ENFOQUE
       ====================================================== */

    --tr-focus-outline-width: 3px;
    --tr-focus-outline-color: rgba(159, 23, 36, 0.32);
    --tr-focus-outline-offset: 3px;
    /* ======================================================
       CONFIGURACIÓN DE SELECCIÓN
       ====================================================== */

    --tr-selection-background: rgba(159, 23, 36, 0.18);
    --tr-selection-color: var(--tr-color-primary-darker);
    /* ======================================================
       VARIABLES DE DOCUMENTOS LEGALES
       ====================================================== */

    --tr-legal-hero-padding-top: 5rem;
    --tr-legal-hero-padding-bottom: 7rem;
    --tr-legal-content-offset: -3.5rem;
    --tr-legal-section-gap: 3rem;
    --tr-legal-section-padding: 2.75rem;
    --tr-legal-card-background: rgba(255, 255, 255, 0.98);
    --tr-legal-sidebar-background: rgba(255, 255, 255, 0.97);
    /* ======================================================
       RUPTURAS RESPONSIVE
       Referenciales para mantener consistencia.
       CSS no permite utilizarlas directamente en @media.
       ====================================================== */

    --tr-breakpoint-sm: 36rem;
    --tr-breakpoint-md: 48rem;
    --tr-breakpoint-lg: 64rem;
    --tr-breakpoint-xl: 80rem;
}

/* ==========================================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   Las animaciones se ajustarán en los demás archivos.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --tr-transition-fast: 0ms;
        --tr-transition-base: 0ms;
        --tr-transition-slow: 0ms;
    }
}