:root {
    /* Primitive Colors */

    --white-50: 0, 0%, 98%; /* #FAFAFA */
    --white-100: 0, 0%, 97%; /* #F8F8F8 */

    --dark-gray-400: 0, 0%, 49%; /* #7D7D7D */
    --dark-gray-700: 0, 0%, 36%; /* #5D5D5D */
    --dark-gray-900: 0, 0%, 15%; /* #272727 */

    --red-50: 5, 92%, 95%; /* #FEE9E7 */
    --red-300: 6, 86%, 69%; /* #F4776A */
    --red-500: 1, 88%, 40%; /* #C00F0C */
    --red-600: 1, 88%, 30%; /* #900B09 */
    --red-700: 1, 88%, 22%; /* #690807 */
    --red-800: 1, 77%, 17%; /* #4D0B0A */
    --red-900: 0, 96%, 19%; /* #5D0202 */

    --cian-50: 191, 79%, 95%; /* #E6F8FC */
    --cian-300: 190, 76%, 63%; /* #58CFE8 */
    --cian-500: 191, 96%, 44%; /* #05B7DD */
    --cian-600: 190, 95%, 40%; /* #05A7C9 */
    --cian-700: 191, 95%, 32%; /* #04829D */
    --cian-800: 191, 95%, 25%; /* #03657A */
    --cian-900: 191, 96%, 19%; /* #024D5D */
    
    --gray-50: 0, 0%, 95%; /* #F3F3F3 */
    --gray-100: 0, 0%, 85%; /* #D9D9D9 */
    --gray-200: 0, 0%, 78%; /* #C6C6C6 */
    --gray-300: 0, 0%, 61%; /* #9C9C9C */
    --gray-400: 0, 0%, 49%; /* #7D7D7D */
    --gray-500: 0, 0%, 47%; /* #777777 */
    --gray-600: 0, 0%, 28%; /* #484848 */
    --gray-700: 0, 0%, 22%; /* #373737 */
    --gray-800: 217, 33%, 17%; /* #1E293B */
    --gray-900: 220, 43%, 11%; /* #101828 */
    --gray-950: 0, 0%, 9%; /* #171717 */

    --black-900: 240, 4%, 5%; /* #0C0C0D */

    --pink-50: 295, 71%, 97%; /* #FCF1FD */
    --pink-600: 317, 63%, 45%; /* #BA2A92 */
    
    --orange-100: 30, 100%, 96%; /* #FFF6ED */
    --orange-500: 13, 90%, 40%; /* #C4320A */

    --blue-100: 220, 84%, 95%; /* #E8EFFD */
    --blue-300: 195, 27%, 82%; /* #C5D8DE */
    --blue-500: 219, 82%, 35%; /* #1044A5 */
    --blue-700: 205, 62%, 36%; /* ##236595 */
    --blue-800: 204, 71%, 25%; /* #12476B */

    --yellow-50: 42, 100%, 96%; /* #FFF8E9 */

    --green-50: 129, 100%, 96%; /* #EBFFEE */
    --green-600: 151, 100%, 25%; /* #008043 */
    --green-700: 151, 95%, 17%; /* #02542D */

    --muted-teal-200: 191, 19%, 55%; /* #749BA3 */
    --slate-900: 220, 43%, 11%; /* #101828 */
    --dark-blue-900: 218, 29%, 5%; /* #0A0D12 */
    --slate-gray-500: 221, 13%, 46%; /* --gray-500 */

    /* Semantic Colors */

    /* Primary Button */

    --primary-btn-disabled-bg: hsla(var(--cian-800), 0.5);
    --primary-btn-disabled-text: hsl(var(--gray-50));
              
    --primary-btn-focused-bg: hsl(var(--cian-800));
    --primary-btn-focused-text: hsl(var(--gray-50));
    --primary-btn-focused-shadow: hsl(var(--muted-teal-200));
              
    --primary-btn-hover-bg: hsl(var(--cian-900));
    --primary-btn-hover-text: hsl(var(--gray-50));
              
    --primary-btn-default-bg: hsl(var(--cian-800));
    --primary-btn-default-text: hsl(var(--gray-50));

    /* Secondary Button */

    --secondary-btn-disabled-border: hsla(var(--gray-300), 0.5);
    --secondary-btn-disabled-text: hsla(var(--gray-700), 0.5);
                
    --secondary-btn-focused-bg: hsl(var(--white-50));
    --secondary-btn-focused-border: hsl(var(--gray-300));
    --secondary-btn-focused-text: hsl(var(--gray-700));
    --secondary-btn-focused-shadow: hsl(var(--gray-100));
                
    --secondary-btn-hover-border: hsl(var(--gray-500));
    --secondary-btn-hover-text: hsl(var(--gray-900));
                
    --secondary-btn-default-border: hsl(var(--gray-300));
    --secondary-btn-default-text: hsl(var(--gray-700));

    /* Tertiary Button */

    --tertiary-btn-disabled-text: hsla(var(--dark-gray-900), 0.5);

    --tertiary-btn-focused-text: hsl(var(--dark-gray-900));
    --tertiary-btn-focused-border: hsl(var(--dark-gray-700));

    --tertiary-btn-hover-text: hsl(var(--black-900));
    --tertiary-btn-default-text: hsl(var(--dark-gray-900));

    /* Disable Button */

    --disable-btn-disabled-bg: hsla(var(--cian-600), 0.5);
    --disable-btn-disabled-text: hsl(var(--gray-50));
      
    --disable-btn-focused-bg: hsl(var(--red-300));
    --disable-btn-focused-text: hsl(var(--gray-50));
    --disable-btn-focused-shadow: hsl(var(--gray-100));
      
    --disable-btn-hover-bg: hsl(var(--red-500));
    --disable-btn-hover-text: hsl(var(--gray-50));
    --disable-btn-hover-shadow: hsla(var(--red-900), .35);
      
    --disable-btn-default-bg: hsl(var(--red-600));
    --disable-btn-default-text: hsl(var(--gray-50));

    /* Nav Button */

    --nav-btn-default-bg: hsl(var(--white-50));
    --nav-btn-default-text: hsl(var(--cian-900));
    --nav-btn-default-shadow-primary: hsla(var(--gray-950), .1);
    --nav-btn-default-shadow-secondary: hsla(var(--gray-950), .06);

    --nav-btn-disabled-bg: hsla(var(--white-50), 0.5);
    --nav-btn-disabled-text: hsl(var(--dark-gray-700));

    /* Role badges */

    --role-badge-admin-bg: hsl(var(--blue-100));
    --role-badge-admin-border: hsl(var(--blue-500));
    --role-badge-admin-text: hsl(var(--blue-500));

    --role-badge-support-bg: hsl(var(--pink-50));
    --role-badge-support-border: hsl(var(--pink-600));
    --role-badge-support-text: hsl(var(--pink-600));

    --role-badge-or-bg: hsl(var(--orange-100));
    --role-badge-or-border: hsl(var(--orange-500));
    --role-badge-or-text: hsl(var(--orange-500));

    --role-badge-disabled-bg: hsl(var(--gray-100));
    --role-badge-disabled-text: hsl(var(--gray-300));
    
    /* Nav Label */

    --nav-user-title-text: hsl(var(--dark-gray-900));
    --nav-user-subtitle-text: hsl(var(--dark-gray-700));

    /* Dropdown List */

    --dropdown-default-bg: hsl(var(--white-50));
    --dropdown-default-border: hsl(var(--gray-200));
    --dropdown-default-shadow: hsla(var(--slate-900), 0.05);
    --dropdown-default-text: hsl(var(--gray-700));

    --dropdown-hover-bg: hsl(var(--gray-50));
    
    --dropdown-menu-bg: hsl(var(--white-50));
    --dropdown-menu-border: hsl(var(--gray-100));
    --dropdown-menu-shadow-primary: hsla(var(--slate-900), 0.08);
    --dropdown-menu-shadow-secondary: hsla(var(--slate-900), 0.03);

    /* Main Label */

    --main-overline-text: hsl(var(--cian-900));
    --main-title-text: hsl(var(--dark-gray-900));
    --main-subtitle-text: hsl(var(--dark-gray-700));
    --main-description-text: hsl(var(--gray-800));
    --main-subtitle-emphasis-text: hsl(var(--cian-800));

    /* Main Input */

    --main-input-bg: hsl(var(--white-50));
    --main-input-border: hsl(var(--gray-200));
    --main-input-text: hsl(var(--dark-gray-400));
    --main-input-placeholder: hsl(var(--gray-400));
    --main-input-shadow: hsla(var(--gray-900), .05);

    --main-input-focus-border: hsl(var(--cian-500));

    /* Misc */

    --main-image-card-border: hsl(var(--gray-300));
    --main-image-card-bg: hsl(var(--white-50));

    --main-validation-error-border: hsl(var(--red-300));
    --main-validation-error-text: hsl(var(--red-500));

    --page-hover-bg: hsl(var(--cian-50));
    --page-hover-text: hsl(var(--cian-700));

    --disable-user-header: hsl(var(--red-800));

    --login-card-shadow: hsla(var(--blue-800), .25);
    --central-box-header-color: hsl(var(--blue-700));
    --two-factor-qr-border: hsl(var(--gray-200));

    /* Table */

    --main-table-bg: hsl(var(--white-50));
    --main-table-bg-even: hsl(var(--white-100));
    --main-table-border: hsl(var(--gray-100));

    --main-table-header-bg: hsl(var(--gray-100));
    --main-table-header-border: hsl(var(--gray-50));

    --main-table-button-shadow: hsla(var(--dark-blue-900), 0.05);

    /* Alerts */

    --alert-warning-bg: hsl(var(--yellow-50));
    --alert-warning-text: hsl(var(--gray-900));

    --alert-error-bg: hsl(var(--red-50));
    --alert-error-border: hsl(var(--red-600));
    --alert-error-title-text: hsl(var(--gray-800));
    --alert-error-subtitle-text: hsl(var(--gray-700));

    --alert-success-bg: hsl(var(--green-50));
    --alert-success-border: hsl(var(--green-600));
    --alert-success-title-text: hsl(var(--gray-800));
    --alert-success-subtitle-text: hsl(var(--gray-700));

    /* Hint box */

    --hint-box-bg: hsl(var(--dark-gray-900));
    --hint-box-text: hsl(var(--white-50));

    /* Field Box */

    --field-box-default-bg: hsl(var(--white-50));
    --field-box-default-border: hsl(var(--gray-300));
    --field-box-default-text: hsl(var(--dark-gray-900));

    --field-box-hover-bg: hsl(var(--white-50));
    --field-box-hover-border: hsl(var(--cian-500));
    --field-box-hover-text: hsl(var(--dark-gray-900));

    --field-box-placeholder-bg: hsl(var(--white-50));
    --field-box-placeholder-border: hsl(var(--gray-200));
    --field-box-placeholder-text: hsl(var(--dark-gray-400));

    /* Card */

    --main-card-bg: hsla(var(--white-50), 0.4);
    --main-card-border: hsl(var(--white-100));

    /* ToggleBtn */

    --toggle-btn-default-text: hsl(var(--gray-800));
    --toggle-btn-default-bg: hsl(var(--white-50));
    --toggle-btn-default-shadow-primary: hsla(var(--gray-950), 0.1);
    --toggle-btn-default-shadow-secondary: hsla(var(--gray-950), 0.06);

    --toggle-btn-disabled-text: hsl(var(--gray-950));
    --toggle-btn-disabled-bg: hsl(var(--gray-50));

    /* SearchBar */

    --search-bar-text: hsl(var(--gray-800));
    --search-bar-placeholder: hsl(var(--gray-800));

    --search-bar-bg: hsl(var(--white-50));
    --search-bar-border: hsl(var(--gray-200));
    --search-bar-shadow: hsla(var(--slate-900), 0.05);

    --search-bar-dropdown-text: hsl(var(--gray-600));

    /* DatePicker */

    --datepicker-bg: hsl(var(--white-100));
    --datepicker-shadow-principal: hsla(var(--dark-blue-900), .08);
    --datepicker-shadow-secondary: hsla(var(--dark-blue-900), .03);

    --datepicker-nav-title: hsl(var(--gray-700));
    --datepicker-cell-text-other: hsl(var(--gray-500));
    --datepicker-cell-text: hsl(var(--gray-700));
    --datepicker-cell-current-bg: hsl(var(--gray-50));

    --datepicker-cell-selected-bg: hsl(var(--cian-600));
    --datepicker-cell-selected-bg-range: hsl(var(--cian-50));
    --datepicker-cell-selected-text: hsl(var(--white-50));
    --datepicker-cell-selected-text-range: hsl(var(--cian-700));

    --datepicker-dropdown-text: hsl(var(--slate-gray-500));
}