:root {
  /* ==================================================
     PALETA DE COLORES
     ================================================== */
  --colorPrimary: #061531;
  --colorPrimaryHover: #0d2248;
  --colorPrimaryActive: #14315f;

  --colorWhite: #ffffff;
  --colorBlack: #1b1b1b;

  --colorGrayLight: #f7f8fa;
  --colorGrayMedium: #d9dee7;
  --colorGrayDark: #5f6775;

  --colorSuccess: #10b981;
  --colorWarning: #f59e0b;
  --colorError: #ef4444;

  /* ==================================================
     FONDOS
     ================================================== */
  --bgPrimary: var(--colorWhite);
  --bgSecondary: var(--colorGrayLight);
  --bgDark: var(--colorPrimary);

  /* ==================================================
     TEXTOS
     ================================================== */
  --textPrimary: var(--colorBlack);
  --textSecondary: var(--colorGrayDark);
  --textWhite: var(--colorWhite);

  /* ==================================================
     BORDES — Estándar: 0.25rem
     ================================================== */
  --borderStandard: 0.25rem;
  --borderColor: var(--colorGrayMedium);
  --borderHover: var(--colorPrimary);
  --borderFocus: var(--colorPrimary);

  /* ==================================================
     ESTADOS
     ================================================== */
  --stateHover: rgba(6, 21, 49, 0.06);
  --stateActive: rgba(6, 21, 49, 0.12);
  --stateFocus: rgba(6, 21, 49, 0.18);
  --stateDisabledBg: #eceff3;
  --stateDisabledText: #8b94a5;

  /* ==================================================
     SOMBRAS — 3 niveles
     ================================================== */
  --shadowSm: 0 0.125rem 0.5rem rgba(6, 21, 49, 0.06);
  --shadowMd: 0 0.5rem 1.5rem rgba(6, 21, 49, 0.1);
  --shadowLg: 0 1rem 2.5rem rgba(6, 21, 49, 0.16);

  /* ==================================================
     TIPOGRAFÍA
     ================================================== */
  --fontHeading: "Hanson", sans-serif;
  --fontBody: "Helvetica LT Std", Arial, Helvetica, sans-serif;

  --textSm: 0.875rem;
  --textMd: 1rem;
  --textLg: 1.5rem;

  --fontNormal: 400;
  --fontMedium: 500;
  --fontBold: 700;

  /* ==================================================
     ESPACIADO / MÁRGENES / PADDING / ALTURAS — 3 niveles
     ================================================== */
  --spaceSm: 0.5rem;
  --spaceMd: 1rem;
  --spaceLg: 2rem;

  /* ==================================================
     BORDES REDONDEADOS — 3 niveles
     ================================================== */
  --radiusSm: 0.25rem;
  --radiusMd: 0.5rem;
  --radiusLg: 0.75rem;

  /* ==================================================
     LAYOUT
     ================================================== */
  --containerWidth: 95%;
  --containerMaxWidth: 1300px;
  --headerHeight: 80px;

  /* ==================================================
     TRANSICIONES — 3 velocidades
     ================================================== */
  --transitionFast: 0.15s ease;
  --transitionBase: 0.25s ease;
  --transitionSlow: 0.4s ease;

  /* ==================================================
     Z-INDEX
     ================================================== */
  --zBase: 10;
  --zDropdown: 100;
  --zModal: 200;
}