/* 1. Definimos la fuente en el bloque root */
:root {
  --fuente-principal: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 2. Forzamos su uso en absolutamente toda la página */
* {
  font-family: var(--fuente-principal) !important;
}

/* Opcional: Aseguramos que el body también la herede correctamente por defecto */
body {
  font-family: var(--fuente-principal);
}

:root {
  /* ==================================================
     PALETA DE COLORES
  ================================================== */

  /* Color principal de la marca */
  --color-primary: #061531;
  --color-primary-hover: #0d2248;
  --color-primary-active: #14315f;

  /* Neutros */
  --color-white: #ffffff;
  --color-black: #1b1b1b;

  --color-gray-100: #f7f8fa;
  --color-gray-200: #eceff3;
  --color-gray-300: #d9dee7;
  --color-gray-400: #b7bfcb;
  --color-gray-500: #8b94a5;
  --color-gray-600: #5f6775;

  /* ==================================================
     FONDOS
  ================================================== */

  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-100);
  --bg-dark: var(--color-primary);

  /* ==================================================
     TEXTOS
  ================================================== */

  --text-primary: var(--color-black);
  --text-secondary: var(--color-gray-600);
  --text-muted: var(--color-gray-500);
  --text-white: var(--color-white);

  /* ==================================================
     BORDES
  ================================================== */

  --border-color: var(--color-gray-300);
  --border-hover: var(--color-primary);
  --border-focus: var(--color-primary);

  /* ==================================================
     ESTADOS
  ================================================== */

  --state-hover: rgba(6, 21, 49, 0.06);
  --state-active: rgba(6, 21, 49, 0.12);
  --state-focus: rgba(6, 21, 49, 0.18);

  --state-disabled-bg: var(--color-gray-200);
  --state-disabled-text: var(--color-gray-500);

  /* ==================================================
     SOMBRAS
  ================================================== */

  --shadow-sm: 0 2px 8px rgba(6, 21, 49, 0.06);
  --shadow-md: 0 8px 24px rgba(6, 21, 49, 0.1);
  --shadow-lg: 0 16px 40px rgba(6, 21, 49, 0.16);

  /* ==================================================
     TIPOGRAFÍA
  ================================================== */

  --font-heading: "Hanson", sans-serif;
  --font-body: "Helvetica LT Std", Arial, Helvetica, sans-serif;

  /* Tamaños */

  --text-xs: 0.75rem; /*12*/
  --text-sm: 0.875rem; /*14*/
  --text-base: 1rem; /*16*/
  --text-md: 1.125rem; /*18*/
  --text-lg: 1.5rem; /*24*/
  --text-xl: 2rem; /*32*/
  --text-xxl: 3rem; /*48*/
  --text-display: 4rem; /*64*/

  /* Peso */

  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ==================================================
     ESPACIADO (Sistema 8px)
  ================================================== */

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;

  /* ==================================================
     LAYOUT
  ================================================== */

  --container-width: 95%;
  --container-max-width: 1300px;

  --header-height: 80px;
  --sidebar-width: 280px;

  /* ==================================================
     BORDES REDONDEADOS
  ================================================== */

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;

  /* ==================================================
     TRANSICIONES
  ================================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ==================================================
     Z-INDEX
  ================================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}