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

:root {
--color-text: hsla(220, 10%, 30%, 1);
--color-text-disabled: hsla(220, 10%, 30%, .5);
--color-text-placeholder: hsla(220, 10%, 30%, .5);

--color-af: hsla(203, 89%, 21%, 1);

--color-heading: hsla(220, 10%, 20%, 1);
--color-caption: hsla(220, 10%, 40%, 1);

--color-border: hsla(242.5, 5%, 90%, 1);
--color-form-checked: hsla(198, 75%, 47.5%, 1);
--color-form-error: hsla(0, 75%, 47.5%, 1);
--color-form-success: hsla(150, 75%, 47.5%, 1);

--color-label: hsla(240, 4%, 16%, 1);
--color-form-icon: hsla(242.5, 5%, 85%, 1);

--check-border: hsla(240, 5%, 65%, 1);

--color-input-disabled: hsla(220, 5%, 60%, .5);
}

/* @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%, .5);
}

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

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

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

:root {
--color-whitesmoke-background-color: hsla(220, 5%, 97.5%, 1);
--color-very-light-gray-background-color: hsla(220, 5%, 95%, 1);
--color-border-color: hsla(220, 5%, 85%, 1);
--color-link-border-color: hsla(220, 5%, 92.5%, 1);
--color-link-border-color-action: hsla(220, 5%, 87.5%, 1);
--color-link-border-color-active: hsla(220, 5%, 82.5%, 1);

--color-very-light-gray-border-color: hsla(242.5, 5%, 95%, 1);
}

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

/* @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);
}

/* @end @variables - color */

/* @group @variables - color */

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

/* @end @variables - color */

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

/* @group @variables - color black */

:root {
--color-black: hsla(0, 0%, 0%, 1);
}

/* @end @variables - color black */

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

/* @group @variables - color */

:root {
--color-link: hsla(197.5, 75%, 47.5%, 1);
--color-link-border: hsla(197.5, 75%, 47.5%, .85);
--color-link-action: hsla(197.5, 75%, 42.5%, 1);
--color-link-action-border: hsla(197.5, 75%, 47.5%, .85);
--color-link-active: hsla(197.5, 75%, 37.5%, 1);
--color-link-active-border: hsla(197.5, 75%, 37.5%, .85);
--color-link-disabled: hsla(197.5, 75%, 47.5%, .5);
}

/* @end @variables - color */

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

/* @group @variables - form color */

:root {
--color-autofill-primary: hsla(220, 90%, 45%, 1);
--color-autofill-secondary: hsla(220, 90%, 95%, 1);
--color-input-disabled: hsla(220, 10%, 85%, 1);
--color-success-primary: hsla(120, 55%, 45%, 1);
--color-success-secondary: hsla(120, 60%, 95%, 1);
--color-error-primary: hsla(355, 55%, 55%, 1);
--color-error-secondary: hsla(355, 60%, 95%, 1);
--color-warning-primary: hsla(50, 95%, 47.5%, 1);
--color-warning-secondary:hsla(50, 100%, 95%, 1);
--color-focus-primary: hsla(205, 55%, 55%, 1);
--color-focus-secondary: hsla(205, 90%, 97.5%, 1);
--color-focus-tertiary: hsla(205, 55%, 75%, 1);
}

/* @end @variables - form color */

/* @group @variables - disabed color */

:root {
--btn-disabled-background-color: hsla(30, 5%, 85%, .5);
}

/* @end @variables - disabed color */