/* @group @variables - color alpha */

: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 alpha */

/* @group @variables - color black to white */

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

/* @end @variables - color black to white */

/* @group @variables - color black to white */

:root {
--color-white: hsla(0, 0%, 100%, 1);
--color-white-link: hsla(0, 0%, 95%, 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);
}

/* @end @variables - color black to white */

/* @group @variables - color black to white */

: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 black to white */

/* @group @variables - color black to white */

:root {
--color-very-light-gray: hsla(220, 5%, 90%, 1);
--color-very-light-gray-action: hsla(220, 5%, 85%, 1);
--color-very-light-gray-active: hsla(220, 5%, 80%, 1);
--color-very-light-gray-disabled: hsla(220, 5%,90%, var(--alpha-disabled));
}

/* @end @variables - color black to white */

/* @group @variables - color black to white */

:root {
--color-gainsboro: hsla(220, 5%, 85%, 1);
--color-gainsboro-action: hsla(220, 5%, 80%, 1);
--color-gainsboro-active: hsla(220, 5%, 75%, 1);
--color-gainsboro-disabled: hsla(220, 5%,80%, var(--alpha-disabled));
}

/* @end @variables - color black to white */

/* @group @variables - color black to white */

: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 black to white */

/* @group @variables - color black to white */

: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 black to white */

/* @group @variables - color black to white */

: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 black to white */

/* @group @variables - color black to white */

: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 black to white */

/* @group @variables - color black */

: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 black */

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

/* @group @variables - color black */

:root {
--border-color: var(--color-gainsboro);
--check-border-color: var(--color-very-light-gray);
}

/* @end @variables - color black */

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

/* @group @variables - color */

:root {
--color-link: hsla(205, 80%, 47%, 1);
--color-link-proto: hsla(220, 10%, 50%, 1);
--color-link-border: hsla(205, 80%, 47%, .85);
--color-link-action: hsla(205, 80%, 42%, 1);
--color-link-action-border: hsla(205, 80%, 47%, .85);
--color-link-active: hsla(205, 80%, 37%, 1);
--color-link-active-border: hsla(205, 80%, 37%, .85);
--color-link-disabled: hsla(205, 80%, 47%, var(--alpha-disabled));
}

/* @end @variables - color */