/* @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));
--color-dimgray: hsla(220, 10%, 40%, 1);
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-white: hsla(0, 0%, 100%, 1);
--color-white-action: hsla(0, 0%, 97.5%, 1);
--color-white-active: hsla(0, 0%, 95%, 1);
--color-white-disabled: hsla(0, 0%, 100%, var(--alpha-disabled));
--color-white-border: hsla(0, 0%, 100%, .85);
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-whitesmoke: hsla(0, 0%, 97.5%, 1);
--color-whitesmoke-action: hsla(0, 0%, 97.5%, .75);
--color-whitesmoke-active: hsla(0, 0%, 95%, 1);
--color-white-action-border-primary: hsla(0, 0%, 97.5%, .85);
--color-white-active-border-primary: hsla(0, 0%, 95%, .85);
}

/* @end @variables - color */

/* @group @variables - color */

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

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-gainsboro: hsla(220, 10%, 85%, 1);
--color-gainsboro-disabled: hsla(220, 10%, 85%, var(--alpha-disabled));
--color-neutral-background-alpha-modal: hsla(220, 10%, 40%, var(--alpha-modal));
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-darkgray: hsla(220, 10%, 60%, 1);
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-dimgray: hsla(220, 10%, 40%, 1);
--color-dimgray-action: hsla(220, 10%, 50%, .75);
--color-dimgray-active: hsla(20, 10%, 55%, 1);
--color-dimgray-disabled: hsla(220, 10%, 40%, var(--alpha-disabled));
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-very-dark-gray: hsla(220, 10%, 20%, 1);
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-black: hsla(0, 0%, 0%, 1);
--color-black-action: hsla(0, 0%, 0%, 1);
--color-black-active: hsla(0, 0%, 30%, 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 - text-block */

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

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