:root {
--cros-theme-multiplier: 4;
--cros-lighter-percentage: 5%;
--cros-darker-percentage: 5%;
--cros-shadow-percentage: 5%;

--cros-card-bg: hsl(0, 0%, 100%);
--cros-body-text: hsl(0, 0%, 100%);
--cros-card-text: hsl(0, 2%, 9%);
--cros-primary: hsl(206, 88%, 35%);
--cros-success: hsl(138, 70%, 35%);
--cros-warning: hsl(34, 90%, 50%);
--cros-error: hsl(0, 90%, 40%);
--cros-info: hsl(207, 90%, 54%);
--cros-button-text: hsl(0, 0%, 100%);
--cros-input-text: hsl(0, 0%, 8%);
--cros-href-text: hsl(206, 88%, 35%);
--cros-card-label: hsla(0, 2%, 9%, 0.7);

--cros-primary_H: 206;
--cros-primary_S: 88%;
--cros-primary_L: 35%;
--cros-primary_T: 1;
--cros-success_H: 138;
--cros-success_S: 70%;
--cros-success_L: 35%;
--cros-success_T: 1;
--cros-warning_H: 34;
--cros-warning_S: 90%;
--cros-warning_L: 50%;
--cros-warning_T: 1;
--cros-error_H: 0;
--cros-error_S: 90%;
--cros-error_L: 40%;
--cros-error_T: 1;
--cros-info_H: 207;
--cros-info_S: 90%;
--cros-info_L: 54%;
--cros-info_T: 1;

--cros-primary_hover: hsla(var(--cros-primary_H), var(--cros-primary_S), calc(var(--cros-primary_L) + var(--cros-theme-multiplier) * var(--cros-darker-percentage) * 2), var(--cros-primary_T));
--cros-primary_lighter: hsla(var(--cros-primary_H), var(--cros-primary_S), calc(var(--cros-primary_L) + var(--cros-theme-multiplier) * var(--cros-lighter-percentage)), var(--cros-primary_T));
--cros-primary_darker: hsla(var(--cros-primary_H), var(--cros-primary_S), calc(var(--cros-primary_L) - var(--cros-theme-multiplier) * var(--cros-darker-percentage)), var(--cros-primary_T));
--cros-primary_shadow: hsla(var(--cros-primary_H), var(--cros-primary_S), calc(var(--cros-primary_L) - var(--cros-theme-multiplier) * var(--cros-shadow-percentage) * 10), 1);

--cros-success_hover: hsla(var(--cros-success_H), var(--cros-success_S), calc(var(--cros-success_L) + var(--cros-theme-multiplier) * var(--cros-darker-percentage) * 2), var(--cros-success_T));
--cros-success_lighter: hsla(var(--cros-success_H), var(--cros-success_S), calc(var(--cros-success_L) + var(--cros-theme-multiplier) * var(--cros-lighter-percentage)), var(--cros-success_T));
--cros-success_darker: hsla(var(--cros-success_H), var(--cros-success_S), calc(var(--cros-success_L) - var(--cros-theme-multiplier) * var(--cros-darker-percentage)), var(--cros-success_T));
--cros-success_shadow: hsla(var(--cros-success_H), var(--cros-success_S), calc(var(--cros-success_L) - var(--cros-theme-multiplier) * var(--cros-shadow-percentage) * 10), 1);

--cros-warning_hover: hsla(var(--cros-warning_H), var(--cros-warning_S), calc(var(--cros-warning_L) + var(--cros-theme-multiplier) * var(--cros-darker-percentage) * 2), var(--cros-warning_T));
--cros-warning_lighter: hsla(var(--cros-warning_H), var(--cros-warning_S), calc(var(--cros-warning_L) + var(--cros-theme-multiplier) * var(--cros-lighter-percentage)), var(--cros-warning_T));
--cros-warning_darker: hsla(var(--cros-warning_H), var(--cros-warning_S), calc(var(--cros-warning_L) - var(--cros-theme-multiplier) * var(--cros-darker-percentage)), var(--cros-warning_T));
--cros-warning_shadow: hsla(var(--cros-warning_H), var(--cros-warning_S), calc(var(--cros-warning_L) - var(--cros-theme-multiplier) * var(--cros-shadow-percentage) * 10), 1);

--cros-error_hover: hsla(var(--cros-error_H), var(--cros-error_S), calc(var(--cros-error_L) + var(--cros-theme-multiplier) * var(--cros-darker-percentage) * 2), var(--cros-error_T));
--cros-error_lighter: hsla(var(--cros-error_H), var(--cros-error_S), calc(var(--cros-error_L) + var(--cros-theme-multiplier) * var(--cros-lighter-percentage)), var(--cros-error_T));
--cros-error_darker: hsla(var(--cros-error_H), var(--cros-error_S), calc(var(--cros-error_L) - var(--cros-theme-multiplier) * var(--cros-darker-percentage)), var(--cros-error_T));
--cros-error_shadow: hsla(var(--cros-error_H), var(--cros-error_S), calc(var(--cros-error_L) - var(--cros-theme-multiplier) * var(--cros-shadow-percentage) * 10), 1);

--cros-info_hover: hsla(var(--cros-info_H), var(--cros-info_S), calc(var(--cros-info_L) + var(--cros-theme-multiplier) * var(--cros-darker-percentage) * 2), var(--cros-info_T));
--cros-info_lighter: hsla(var(--cros-info_H), var(--cros-info_S), calc(var(--cros-info_L) + var(--cros-theme-multiplier) * var(--cros-lighter-percentage)), var(--cros-info_T));
--cros-info_darker: hsla(var(--cros-info_H), var(--cros-info_S), calc(var(--cros-info_L) - var(--cros-theme-multiplier) * var(--cros-darker-percentage)), var(--cros-info_T));
--cros-info_shadow: hsla(var(--cros-info_H), var(--cros-info_S), calc(var(--cros-info_L) - var(--cros-theme-multiplier) * var(--cros-shadow-percentage) * 10), 1);

}