/* stylelint-disable declaration-colon-space-after, max-empty-lines */
:root {
    --color-white                   : #ffffff;
    --color-black                   : #000000;

    --color-blue-dark               : #0c4e94;
    --color-blue                    : #1962b0;
    --color-blue-light              : #2288cb;
    --color-blue-footer             : #145ba3;
    --color-blue-lighter            : #9ed9ff;
    --color-blue-text               : #d3eeff;
    --color-blue-medium             : #1056A0;

    --color-orange                  : #f58025;
    --color-orange-light            : #ff8f38;

    --color-sand-dark               : #e4b980;
    --color-sand                    : #fddcb0;

    --font-quatro                   : 'Montserrat', sans-serif;
    --font-lato                     : 'Lato', sans-serif;

    --font-weight-thin              : 100;
    --font-weight-extra-light       : 200;
    --font-weight-light             : 300;
    --font-weight-normal            : 400;
    --font-weight-medium            : 500;
    --font-weight-semi-bold         : 600;
    --font-weight-bold              : 700;
    --font-weight-extra-bold        : 800;
    --font-weight-black             : 900;

    --max-width                     : 129rem;
}

@custom-media --screen-large        (width >= 1024px);

@custom-media --screen-medium-large (width >= 630px);
@custom-media --screen-medium       (width >= 630px) and (width < 1024px);

@custom-media --screen-small-large  (width >= 420px);
@custom-media --screen-small-medium (width >= 420px) and (width < 1024px);
@custom-media --screen-small        (width >= 420px) and (width < 630px);

@custom-media --screen-mini-medium  (width < 1024px);
@custom-media --screen-mini-small   (width < 630px);
@custom-media --screen-mini         (width < 420px);

@custom-selector :--focus :hover, :focus, :active;