/* @group @Variables - color */

:root {
--primary-text-color: hsla(20, 5%, 25%, 1);
--primary-all-text-color: hsla(20, 5%, 25%, 1);
--secondary-text-color: hsla(20, 5%, 50%, 1);
--secondary-all-text-color: hsla(20, 5%, 50%, 1);
--disabled-text-color: hsla(20, 5%, 25%, var(--opacity-disabled));
--disabled-all-text-color: hsla(20, 5%, 25%, var(--opacity-disabled));
}

/* @end @Variables - color */

/* @group @Variables - color */

:root {
--color-background-default: var(--neutral-colors-100);
--color-background-gray: var(--nblue-gray-colors-90);
--color-background-gray-thead: var(--gray-colors-85);

--color-white-background: var(--neutral-colors-100);
--color-all-white-background: var(--neutral-colors-100);
--color-black-background: var(--neutral-colors-20);
--color-all-black-background: var(--neutral-colors-20);
}

/* @end @Variables - color */

/* @group @Variables - color */

:root {
--neutral-colors-100: hsla(0, 0%, 100%, 1);
--neutral-colors-97: hsla(0, 0%, 97.5%, 1);
--neutral-colors-95: hsla(0, 0%, 95%, 1);
--neutral-colors-90: hsla(0, 0%, 90%, 1);
--neutral-colors-85: hsla(0, 0%, 85%, 1);
--neutral-colors-80: hsla(0, 0%, 80%, 1);
--neutral-colors-73: hsla(0, 0%, 73%, 1);
--neutral-colors-60: hsla(0, 0%, 60%, 1);
--neutral-colors-50: hsla(0, 0%, 50%, 1);
--neutral-colors-40: hsla(0, 0%, 40%, 1);
--neutral-colors-27: hsla(0, 0%, 27%, 1);
--neutral-colors-20: hsla(0, 0%, 20%, 1);
--neutral-colors-15: hsla(0, 0%, 15%, 1);
--neutral-colors-10: hsla(0, 0%, 10%, 1);
--neutral-colors-05: hsla(0, 0%, 5%, 1);
--neutral-colors-02: hsla(0, 0%, 2.5%, 1);
--neutral-colors-00: hsla(0, 0%, 0%, 1);
}

@media (prefers-color-scheme: dark) {

/*:root {
--neutral-colors-100: hsla(0, 0%, 0%, 1);
--neutral-colors-97: hsla(0, 0%, 2.5%, 1);
--neutral-colors-95: hsla(0, 0%, 5%, 1);
--neutral-colors-90: hsla(0, 0%, 10%, 1);
--neutral-colors-85: hsla(0, 0%, 15%, 1);
--neutral-colors-80: hsla(0, 0%, 20%, 1);
--neutral-colors-73: hsla(0, 0%, 27%, 1);
--neutral-colors-60: hsla(0, 0%, 40%, 1);
--neutral-colors-50: hsla(0, 0%, 50%, 1);
--neutral-colors-40: hsla(0, 0%, 60%, 1);
--neutral-colors-27: hsla(0, 0%, 73%, 1);
--neutral-colors-20: hsla(0, 0%, 80%, 1);
--neutral-colors-15: hsla(0, 0%, 85%, 1);
--neutral-colors-10: hsla(0, 0%, 90%, 1);
--neutral-colors-05: hsla(0, 0%, 95%, 1);
--neutral-colors-02: hsla(0, 0%, 97.5%, 1);
--neutral-colors-00: hsla(0, 0%, 100%, 1);
}*/

}

/* @end @Variables - color */

/* @group @Variables - color */

:root {
--neutral-colors-100-disabled: hsla(0, 0%, 100%, var(--opacity-disabled));
--neutral-colors-97-disabled: hsla(0, 0%, 97.5%, var(--opacity-disabled));
--neutral-colors-95-disabled: hsla(0, 0%, 95%, var(--opacity-disabled));
--neutral-colors-90-disabled: hsla(0, 0%, 90%, var(--opacity-disabled));
--neutral-colors-85-disabled: hsla(0, 0%, 85%, var(--opacity-disabled));
--neutral-colors-80-disabled: hsla(0, 0%, 80%, var(--opacity-disabled));
--neutral-colors-73-disabled: hsla(0, 0%, 73%, var(--opacity-disabled));
--neutral-colors-60-disabled: hsla(0, 0%, 60%, var(--opacity-disabled));
--neutral-colors-50-disabled: hsla(0, 0%, 50%, var(--opacity-disabled));
--neutral-colors-40-disabled: hsla(0, 0%, 40%, var(--opacity-disabled));
--neutral-colors-27-disabled: hsla(0, 0%, 27%, var(--opacity-disabled));
--neutral-colors-20-disabled: hsla(0, 0%, 20%, var(--opacity-disabled));
--neutral-colors-15-disabled: hsla(0, 0%, 15%, var(--opacity-disabled));
--neutral-colors-10-disabled: hsla(0, 0%, 10%, var(--opacity-disabled));
--neutral-colors-05-disabled: hsla(0, 0%, 5%, var(--opacity-disabled));
--neutral-colors-02-disabled: hsla(0, 0%, 2.5%, var(--opacity-disabled));
--neutral-colors-00-disabled: hsla(0, 0%, 0%, var(--opacity-disabled));
}

/* @end @Variables - color */

/* @group @Variables - color */

:root {
--all-neutral-colors-100: hsla(0, 0%, 100%, 1);
--all-neutral-colors-97: hsla(0, 0%, 97.5%, 1);
--all-neutral-colors-95: hsla(0, 0%, 95%, 1);
--all-neutral-colors-90: hsla(0, 0%, 90%, 1);
--all-neutral-colors-85: hsla(0, 0%, 85%, 1);
--all-neutral-colors-80: hsla(0, 0%, 80%, 1);
--all-neutral-colors-73: hsla(0, 0%, 73%, 1);
--all-neutral-colors-60: hsla(0, 0%, 60%, 1);
--all-neutral-colors-50: hsla(0, 0%, 50%, 1);
--all-neutral-colors-40: hsla(0, 0%, 40%, 1);
--all-neutral-colors-27: hsla(0, 0%, 27%, 1);
--all-neutral-colors-20: hsla(0, 0%, 20%, 1);
--all-neutral-colors-15: hsla(0, 0%, 15%, 1);
--all-neutral-colors-10: hsla(0, 0%, 10%, 1);
--all-neutral-colors-05: hsla(0, 0%, 5%, 1);
--all-neutral-colors-02: hsla(0, 0%, 2.5%, 1);
--all-neutral-colors-00: hsla(0, 0%, 0%, 1);
}

/* @end @Variables - color */

/* @group @Variables - color */

:root {
--gray-colors-100: hsla(0, 0%, 100%, 1);
--gray-colors-97: hsla(220, 2.5%, 97.5%, 1);
--gray-colors-95: hsla(220, 2.5%, 95%, 1);
--gray-colors-90: hsla(220, 2.5%, 90%, 1);
--gray-colors-85: hsla(220, 2.5%, 85%, 1);
--gray-colors-80: hsla(220, 2.5%, 80%, 1);
--gray-colors-73: hsla(220, 2.5%, 73%, 1);
--gray-colors-60: hsla(220, 2.5%, 60%, 1);
--gray-colors-50: hsla(220, 2.5%, 50%, 1);
--gray-colors-40: hsla(220, 2.5%, 40%, 1);
--gray-colors-27: hsla(220, 2.5%, 27%, 1);
--gray-colors-20: hsla(220, 2.5%, 20%, 1);
--gray-colors-15: hsla(220, 2.5%, 15%, 1);
--gray-colors-10: hsla(220, 2.5%, 10%, 1);
--gray-colors-05: hsla(220, 2.5%, 5%, 1);
--gray-colors-02: hsla(220, 2.5%, 2.5%, 1);
--gray-colors-00: hsla(220, 2.5%, 0%, 1);
}

@media (prefers-color-scheme: dark) {

/*:root {
--gray-colors-100: hsla(220, 2.5%, 0%, 1);
--gray-colors-97: hsla(220, 2.5%, 2.5%, 1);
--gray-colors-95: hsla(220, 2.5%, 5%, 1);
--gray-colors-90: hsla(220, 2.5%, 10%, 1);
--gray-colors-85: hsla(220, 2.5%, 15%, 1);
--gray-colors-80: hsla(220, 2.5%, 20%, 1);
--gray-colors-73: hsla(220, 2.5%, 27%, 1);
--gray-colors-60: hsla(220, 2.5%, 40%, 1);
--gray-colors-50: hsla(220, 2.5%, 50%, 1);
--gray-colors-40: hsla(220, 2.5%, 60%, 1);
--gray-colors-27: hsla(220, 2.5%, 73%, 1);
--gray-colors-20: hsla(220, 2.5%, 80%, 1);
--gray-colors-15: hsla(220, 2.5%, 85%, 1);
--gray-colors-10: hsla(220, 2.5%, 90%, 1);
--gray-colors-05: hsla(220, 2.5%, 95%, 1);
--gray-colors-02: hsla(220, 2.5%, 97.5%, 1);
--gray-colors-00: hsla(220, 2.5%, 100%, 1);
}*/

}

/* @end @Variables - color */

/* @group @Variables - color */

:root {
--gray-colors-100-disabled: hsla(220, 2.5%, 100%, var(--opacity-disabled));
--gray-colors-97-disabled: hsla(220, 2.5%, 97.5%, var(--opacity-disabled));
--gray-colors-95-disabled: hsla(220, 2.5%, 95%, var(--opacity-disabled));
--gray-colors-90-disabled: hsla(220, 2.5%, 90%, var(--opacity-disabled));
--gray-colors-85-disabled: hsla(220, 2.5%, 85%, var(--opacity-disabled));
--gray-colors-80-disabled: hsla(220, 2.5%, 80%, var(--opacity-disabled));
--gray-colors-73-disabled: hsla(220, 2.5%, 73%, var(--opacity-disabled));
--gray-colors-60-disabled: hsla(220, 2.5%, 60%, var(--opacity-disabled));
--gray-colors-50-disabled: hsla(220, 2.5%, 50%, var(--opacity-disabled));
--gray-colors-40-disabled: hsla(220, 2.5%, 40%, var(--opacity-disabled));
--gray-colors-27-disabled: hsla(220, 2.5%, 27%, var(--opacity-disabled));
--gray-colors-20-disabled: hsla(220, 2.5%, 20%, var(--opacity-disabled));
--gray-colors-15-disabled: hsla(220, 2.5%, 15%, var(--opacity-disabled));
--gray-colors-10-disabled: hsla(220, 2.5%, 10%, var(--opacity-disabled));
--gray-colors-05-disabled: hsla(220, 2.5%, 5%, var(--opacity-disabled));
--gray-colors-02-disabled: hsla(220, 2.5%, 2.5%, var(--opacity-disabled));
--gray-colors-00-disabled: hsla(220, 2.5%, 0%, var(--opacity-disabled));
}

/* @end @Variables - color */

/* @group @Variables - color */

:root {
--all-gray-colors-100: hsla(220, 2.5%, 100%, 1);
--all-gray-colors-97: hsla(220, 2.5%, 97.5%, 1);
--all-gray-colors-95: hsla(220, 2.5%, 95%, 1);
--all-gray-colors-90: hsla(220, 2.5%, 90%, 1);
--all-gray-colors-85: hsla(220, 2.5%, 85%, 1);
--all-gray-colors-80: hsla(220, 2.5%, 80%, 1);
--all-gray-colors-73: hsla(220, 2.5%, 73%, 1);
--all-gray-colors-60: hsla(220, 2.5%, 60%, 1);
--all-gray-colors-50: hsla(220, 2.5%, 50%, 1);
--all-gray-colors-40: hsla(220, 2.5%, 40%, 1);
--all-gray-colors-27: hsla(220, 2.5%, 27%, 1);
--all-gray-colors-20: hsla(220, 2.5%, 20%, 1);
--all-gray-colors-15: hsla(220, 2.5%, 15%, 1);
--all-gray-colors-10: hsla(220, 2.5%, 10%, 1);
--all-gray-colors-05: hsla(220, 2.5%, 5%, 1);
--all-gray-colors-02: hsla(220, 2.5%, 2.5%, 1);
--all-gray-colors-00: hsla(220, 2.5%, 0%, 1);
}

/* @end @Variables - color */

/* color --------------------------------------------------------*/

/* @group @Variables - color */

:root {
--success-primary: hsla(120, 55%, 45%, 1);
--error-primary: hsla(355, 55%, 55%, 1);
--error-primary-hover: hsla(355, 55%, 45%, 1);
--error-primary-disabled: hsla(355, 55%, 55%, var(--opacity-disabled));
--warning-primary: hsla(50, 55%, 45%, 1);
--success-secondary: hsla(120, 60%, 95%, 1);
--error-secondary: hsla(355, 60%, 95%, 1);
--warning-secondary: hsla(50, 60%, 95%, 1);
}

/* @end @Variables - color */

/* color --------------------------------------------------------*/

/* @group @Variables - color */

:root {
--focus-primary: hsla(220, 55%, 45%, 1);
--focus-secondary: hsla(220, 60%, 95%, 1);
--answers-required-primary: hsla(30, 95%, 45%, 1);
--answers-select-required-primary: hsla(150, 95%, 45%, 1);
--answers-any-primary: hsla(220, 20%, 60%, 1);
}

/* @end @Variables - color */

/* color --------------------------------------------------------*/

/* @group @Variables - color */

:root {
--floating-background-colors: hsla(220, 2.5%, 10%, .25);
--floating-background-action-color: hsla(220, 2.5%, 10%, 1);
}

/* @end @Variables - color */

/* @group @Variables - color */

:root {
--all-floating-background-colors: hsla(220, 2.5%, 10%, .25);
--all-floating-background-action-colors: hsla(220, 2.5%, 0%, .5);
}

/* @end @Variables - color */

/* @group @colors - overlay */

:root {
--color-overlay-background: hsla(220, 2.5%, 10%, .875);
--color-overlay-background-backdrop: hsla(220, 2.5%, 10%, .75);
--overlay-backdrop-filter: blur(.0625rem);
}

@media (prefers-color-scheme: dark) {

:root {
--color-overlay-background: hsla(220, 2.5%, 90%, .875);
--color-overlay-background-backdrop: hsla(220, 2.5%, 90%, .75);
}

}

/* @end @color - overlay */

/* color --------------------------------------------------------*/

/* @group @color - box-shadow */

:root {
--link-shadow-color: hsla(220, 10%, 85%, .5);
--link-focus-shadow-color: hsla(220, 10%, 50%, .25);
--link-action-shadow-color: hsla(220, 10%, 50%, .25);
--link-disabled-shadow-color: hsla(220, 80%, 80%, 1);
--header-shadow-color: hsla(220, 10%, 85%, .5);
}

@media (prefers-color-scheme: dark) {

:root {
}

}

/* @end @color - box-shadow */

/* color --------------------------------------------------------*/

/* @group @Variables - color */

:root {
--rating-colors: hsla(40, 100%, 50%, 1);
}

/* @end @Variables - color */

/* color --------------------------------------------------------*/

/* @group @Variables - color */

:root {
--brand-primary-color: hsla(226, 31%, 42%, 1);
--brand-primary-color-action: hsla(226, 31%, 32%, 1);
--brand-primary-color-active: hsla(226, 31%, 22%, 1);
--brand-primary-color-disabled: hsla(226, 65%, 60%, var(--opacity-disabled));

--brand-proto-bg-color: hsla(265, 90%, 97.5%, 1);
--brand-proto-color: hsla(265, 90%, 70%, 1);
--brand-proto-color-action: hsla(265, 90%, 90%, 1);
--brand-proto-color-active: hsla(265, 90%, 80%, 1);
--brand-proto-color-disabled: hsla(265, 90%, 70%, var(--opacity-disabled));

--nav-color-action: hsla(265, 90%, 50%, 1);
--nav-color-active: hsla(265, 90%, 60%, 1);

--brand-secondary-color: hsla(158, 65%, 60%, 1);
--brand-secondary-color-action: hsla(158, 65%, 50%, 1);
--brand-secondary-color-active: hsla(158, 65%, 40%, 1);
--brand-secondary-color-disabled: hsla(158, 65%, 60%, var(--opacity-disabled));
}

/* @end @Variables - color */