/* 
    Customizações
    - Para customizar a opacidade de alguma cor, use o formato:
        .<CLASSE> {
            --tw-color-<CLASSE>: <opacidade>
        }
*/

:root {
    --color-white: 255 255 255;
    --color-black: 0 0 0;
    
    --color-neutrals-0: 255 255 255;
    --color-neutrals-25: 249 249 249;
    --color-neutrals-30: 231 231 231;
    --color-neutrals-50: 209 209 209;
    --color-neutrals-100: 176 176 176;
    --color-neutrals-200: 147 147 147;
    --color-neutrals-300: 109 109 109;
    --color-neutrals-400: 93 93 93;
    --color-neutrals-500: 79 79 79;
    --color-neutrals-600: 69 69 69;
    --color-neutrals-700: 61 61 61;
    --color-neutrals-800: 38 38 38;
    --color-neutrals-900: 0 0 0;

    --color-primary-25: 255 248 237;
    --color-primary-50: 255 240 212;
    --color-primary-100: 255 221 169;
    --color-primary-200: 255 196 114;
    --color-primary-300: 254 160 57;
    --color-primary-400: 253 130 18;
    --color-primary-500: 236 102 8;
    --color-primary-600: 197 77 9;
    --color-primary-700: 156 61 16;
    --color-primary-800: 126 52 16;
    --color-primary-900: 68 23 6;

    --color-secondary-25: 240 247 255;
    --color-secondary-50: 223 237 255;
    --color-secondary-100: 185 220 254;
    --color-secondary-200: 123 193 254;
    --color-secondary-300: 52 161 252;
    --color-secondary-400: 10 134 237;
    --color-secondary-500: 0 103 203;
    --color-secondary-600: 0 79 158;
    --color-secondary-700: 5 71 135;
    --color-secondary-800: 10 59 112;
    --color-secondary-900: 7 37 74;

    --color-info-25: 242 249 249;
    --color-info-50: 221 239 240;
    --color-info-100: 191 224 226;
    --color-info-200: 146 202 206;
    --color-info-300: 95 170 177;
    --color-info-400: 67 142 150;
    --color-info-500: 59 117 127;
    --color-info-600: 53 97 105;
    --color-info-700: 50 81 88;
    --color-info-800: 45 70 76;
    --color-info-900: 26 44 50;

    --color-error-25: 255 245 247;
    --color-error-50: 252 235 235;
    --color-error-100: 255 223 227;
    --color-error-200: 255 201 208;
    --color-error-300: 255 164 175;
    --color-error-400: 255 127 142;
    --color-error-500: 255 107 118;
    --color-error-600: 255 85 85;
    --color-error-700: 221 54 54;
    --color-error-800: 177 28 28;
    --color-error-900: 153 27 42;

    --color-warning-25: 255 252 245;
    --color-warning-50: 255 250 235;
    --color-warning-100: 254 240 199;
    --color-warning-200: 254 223 137;
    --color-warning-300: 254 200 75;
    --color-warning-400: 253 176 34;
    --color-warning-500: 247 144 9;
    --color-warning-600: 220 104 3;
    --color-warning-700: 181 71 8;
    --color-warning-800: 147 55 13;
    --color-warning-900: 122 46 14;

    --color-success-25: 246 254 249;
    --color-success-50: 236 253 243;
    --color-success-100: 209 250 223;
    --color-success-200: 166 244 197;
    --color-success-300: 118 232 154;
    --color-success-400: 96 203 130;
    --color-success-500: 76 174 107;
    --color-success-600: 59 145 86;
    --color-success-700: 43 116 66;
    --color-success-800: 29 86 47;
    --color-success-900: 3 70 43;

    /* Formulário */
    --color-component-form-label: 105 99 98;
    --color-component-form-main: 255 255 255;
    --color-component-form-accent: ;
    --color-component-form-line: 105 99 98;
    --color-component-form-helper: 255 255 255;
    --color-component-form-error: 255 0 0;
    --color-component-form-icon-main: 105 99 98;
    --color-component-form-icon-hover: 122 114 113;
    --color-component-form-submit-main: 105 99 98;
    --color-component-form-submit-hover: 122 114 113;
    --color-component-form-submit-accent: 255 255 255;
    --color-component-form-cancel-main: 209 213 219;
    --color-component-form-cancel-hover: 243 244 246;
    --color-component-form-cancel-accent: 0 0 0;

    /* Alertas */
    --color-component-alert-header-main: 14 165 233;
    --color-component-alert-header-accent: 255 255 255;
    --color-component-alert-body-main: 255 255 255;
    --color-component-alert-body-accent: 0 0 0;

    --color-component-dropdown-main: 255 255 255;
    --color-component-dropdown-accent: 0 0 0;
    --color-component-dropdown-trigger-main: 255 255 255;
    --color-component-dropdown-trigger-accent: 0 0 0;
    --color-component-dropdown-trigger-hover-main: 255 255 255;
    --color-component-dropdown-trigger-hover-accent: 189 24 24;
}

/* Alertas */
.alert.alert-error {
    --color-component-alert-header-main: 190 18 60;
    --color-component-alert-header-accent: 255 255 255;
    --color-component-alert-body-main: 255 255 255;
    --color-component-alert-body-accent: 0 0 0;
}

.alert.alert-warning {
    --color-component-alert-header-main: 245 158 11;
    --color-component-alert-header-accent: 255 255 255;
    --color-component-alert-body-main: 255 255 255;
    --color-component-alert-body-accent: 0 0 0;
}

.alert.alert-success {
    --color-component-alert-header-main: 4 120 87;
    --color-component-alert-header-accent: 255 255 255;
    --color-component-alert-body-main: 255 255 255;
    --color-component-alert-body-accent: 0 0 0;
}
