/* @group @variables - color */

:root {
--alpha-disabled: .5;
--alpha-placeholder: .5;
--alpha-highlight: .15;
--alpha-marker: .075;
--alpha-modal: .25;
--alpha-transparent: .1;
--alpha-shadow: .25;
--alpha-shadow-action: .3125;
--alpha-shadow-active: .375;
--alpha-shadow-white: .625;
--alpha-shadow-white-action: .75;
--alpha-shadow-white-active: .875;
--color-neutral-shadow-lightness: 40;
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-text: hsla(220, 10%, 30%, 1);
--color-text-disabled: hsla(220, 10%, 30%, var(--alpha-disabled));
--color-text-placeholder: hsla(220, 10%, 30%, var(--alpha-placeholder));
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-white: hsla(0, 0%, 100%, 1);
--color-white-action: hsla(0, 0%, 90%, 1);
--color-white-active: hsla(0, 0%, 80%, 1);
--color-white-disabled: hsla(0, 0%, 100%, var(--alpha-disabled));
--color-white-border: hsla(0, 0%, 100%, .85);
--color-white-background-opacity: hsla(0, 0%, 100%, .875);
--color-white-hover-opacity: hsla(0, 0%, 100%, .625);
--color-white-action-opacity: hsla(0, 0%, 100%, .75);
--color-white-active-opacity: hsla(0, 0%, 100%, .5);
--color-white-disabled-opacity: hsla(0, 0%, 100%, .125);
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-whitesmoke: hsla(220, 5%, 97.5%, 1);
--color-whitesmoke-action: hsla(220, 5%, 97.5%, .75);
--color-whitesmoke-active: hsla(220, 5%, 95%, 1);
--color-whitesmoke-background-color: hsla(220, 5%, 97.5%, 1);
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-very-light-gray: hsla(220, 5%, 90%, 1);
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-gainsboro: hsla(220, 5%, 85%, 1);
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-silver: hsla(220, 5%, 75%, 1);
--color-silver-action: hsla(220, 5%, 70%, 1);
--color-silver-active: hsla(220, 5%, 65%, 1);
--color-silver-disabled: hsla(220, 5%, 75%, var(--alpha-disabled));
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-darkgray: hsla(220, 5%, 60%, 1);
--color-darkgray-action: hsla(220, 5%, 70%, 1);
--color-darkgray-active: hsla(220, 5%, 75%, 1);
--color-darkgray-disabled: hsla(220, 5%, 60%, var(--alpha-disabled));
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-dimgray: hsla(220, 5%, 40%, 1);
--color-dimgray-action: hsla(220, 5%, 50%, 1);
--color-dimgray-active: hsla(220, 5%, 60%, 1);
--color-dimgray-disabled: hsla(220, 5%, 60%%, var(--alpha-disabled));
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-very-dark-gray: hsla(220, 5%, 20%, 1);
--color-very-dark-gray-action: hsla(220, 5%, 30%, 1);
--color-very-dark-gray-active: hsla(220, 5%, 40%, 1);
--color-very-dark-gray-disabled: hsla(220, 5%, 20%, var(--alpha-disabled));
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-black: hsla(0, 0%, 0%, 1);
--color-black-action: hsla(0, 0%, 10%, 1);
--color-black-active: hsla(0, 0%, 20%, 1);
--color-black-disabled: hsla(0, 0%, 100%, var(--alpha-disabled));
}

/* @end @variables - color */

/* --------------------------------------------------------*/

/* @group @variables - color */

:root {
--color-highlight: hsla(60, 100%, 50%, 1);
}

/* @end @variables - color */

/* --------------------------------------------------------*/

/* @group @variables - color */

:root {
--color-link: hsla(205, 80%, 45%, 1);
--color-link-border: hsla(205, 80%, 45%, .85);
--color-link-action: hsla(205, 80%, 40%, 1);
--color-link-action-border: hsla(205, 80%, 40%, .85);
--color-link-active: hsla(205, 80%, 35%, 1);
--color-link-active-border: hsla(205, 80%, 35%, .85);
--color-link-disabled: hsla(205, 80%, 45%, var(--alpha-disabled));
}

/* @end @variables - color */

/* --------------------------------------------------------*/

/* @group @variables - object-position */

:root {
--object-fit-cover: cover;
--object-position-primary: top left;
--object-position-secondary: top center;
--object-position-tertiary: top right;
--object-position-quaternary: center right;
--object-position-quinary: bottom right;
--object-position-senary: bottom center;
--object-position-septenary: bottom left;
--object-position-octonary: center left;
--object-position-novenary: center center;
}

/* @end @variables - object-position */

/* --------------------------------------------------------*/

/* @group @variables - text-align */

@media all and (min-width:48em) {

:root {
--text-align-proto: left;
--text-align-deutero: center;
--text-align-trito: right;
}

}

@media all and (max-width:47.9375em) {

:root {
--text-align-primero: left;
--text-align-segundo: center;
--text-align-right: tercero;
}

}

/* @end @variables - text-align */

/* --------------------------------------------------------*/

/* @group @variables - text-block */

:root {
--text-block-margin-bottom: 1.5rem;
}

/* @end @variables - text-block */