/* ===================== VARIABLES GLOBALES ===================== */
:root {
    /* =====================
       PALETA DE COLORES PRINCIPAL
       ===================== */
    --hz-color-abisal: #0a1a2f;
    --hz-color-profundo: #152642;
    --hz-color-profundo2: #05050C;
    --hz-color-oceano: #1e3a5f;
    --hz-color-acero: #2d4a73;
    --hz-color-costa: #3a5a8a;
    --hz-color-amanecer: #4a6ba5;

    /* =====================
       COLORES NEUTROS
       ===================== */
    --hz-color-grafito: #2a2d34;
    --hz-color-pizarra: #3d424d;
    --hz-color-niebla: #e8eef7;
    --hz-color-espuma: #f5f8fc;

    /* =====================
       COLORES DE ÉNFASIS
       ===================== */
    --hz-color-reflejo: #8ab4f8;
    --hz-color-dorado: #b8a26d;

    /* =====================
       TIPOGRAFÍA
       ===================== */
    --hz-font-primary: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --hz-font-secondary: 'Georgia', 'Times New Roman', serif;

    /* =====================
       EFECTOS Y TRANSICIONES
       ===================== */
    --hz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --hz-shadow: 0 4px 20px rgba(10, 26, 47, 0.08);
    --hz-shadow-hover: 0 8px 30px rgba(10, 26, 47, 0.12);
    --hz-border-radius: 6px;

    /* =====================
       COLORES DE ICONOS
       ===================== */
    --hz-icon-primary: var(--hz-color-dorado);
    --hz-icon-secondary: var(--hz-color-oceano);
    --hz-icon-inverse: #ffffff;

    /* =====================
       FONDOS DE NOTAS Y AVISOS
       ===================== */
    --hz-note-bg: var(--hz-color-espuma);
    --hz-note-bg-alt: var(--hz-color-niebla);
    --hz-note-border: var(--hz-color-dorado);
    --hz-note-icon: var(--hz-color-dorado);

    /* =====================
       BOTONES (CTA Y ACCIONES)
       ===================== */
    --hz-btn-outline-border: var(--hz-color-dorado);
    --hz-btn-outline-text: var(--hz-color-dorado);
    --hz-btn-outline-bg-hover: var(--hz-color-dorado);
    --hz-btn-outline-text-hover: var(--hz-color-abisal);
    --hz-btn-primary-hover: var(--hz-color-profundo);

    /* =====================
       FORMULARIOS (UX STATES)
       ===================== */
    --hz-input-focus-border: var(--hz-color-reflejo);
    --hz-input-focus-shadow: rgba(138, 180, 248, 0.25);
    --hz-input-accent: var(--hz-color-dorado);

    /* =====================
       SEPARADORES Y DETALLES
       ===================== */
    --hz-divider-color: rgba(10, 26, 47, 0.08);
    --hz-card-border: var(--hz-color-niebla);

    /* =====================
       BLOQUES OSCUROS
       ===================== */
    --hz-text-on-dark: #ffffff;
    --hz-text-on-dark-muted: rgba(255, 255, 255, 0.85);
}