:root {
    /* Grayscales */
    --color-black: var(--app-color-black, #000);
    --color-gray-900: var(--app-color-gray-900, #1a202c);
    --color-gray-800: var(--app-color-gray-800, #2D3748);
    --color-gray-700: var(--app-color-gray-700, #4A5568);
    --color-gray-600: var(--app-color-gray-600, #718096);
    --color-gray-500: var(--app-color-gray-500, #A0AEC0);
    --color-gray-400: var(--app-color-gray-400, #CBD5E0);
    --color-gray-300: var(--app-color-gray-300, #E2E8F0);
    --color-gray-200: var(--app-color-gray-200, #EDF2F7);
    --color-gray-100: var(--app-color-gray-100, #F7FAFC);
    --color-white: var(--app-color-white, #FFF);

    --light-color-primary: var(--color-gray-900);
    --light-color-secondary: var(--color-gray-600);
    --light-color-tertiary: var(--color-gray-500);
    --dark-color-primary: var(--color-white);
    --dark-color-secondary: var(--color-gray-400);
    --dark-color-tertiary: var(--color-gray-700);

    --color-black-primary: var(--dark-color-primary);
    --color-black-secondary: var(--dark-color-secondary);
    --color-gray-900-primary: var(--dark-color-primary);
    --color-gray-900-secondary: var(--dark-color-secondary);
    --color-gray-800-primary: var(--dark-color-primary);
    --color-gray-800-secondary: var(--dark-color-secondary);
    --color-gray-700-primary: var(--dark-color-primary);
    --color-gray-700-secondary: var(--dark-color-secondary);
    --color-gray-600-primary: var(--light-color-primary);
    --color-gray-600-secondary: var(--light-color-secondary);
    --color-gray-500-primary: var(--light-color-primary);
    --color-gray-500-secondary: var(--light-color-secondary);
    --color-gray-400-primary: var(--light-color-primary);
    --color-gray-400-secondary: var(--light-color-secondary);
    --color-gray-300-primary: var(--light-color-primary);
    --color-gray-300-secondary: var(--light-color-secondary);
    --color-gray-200-primary: var(--light-color-primary);
    --color-gray-200-secondary: var(--light-color-secondary);
    --color-gray-100-primary: var(--light-color-primary);
    --color-gray-100-secondary: var(--light-color-secondary);
    --color-white-primary: var(--light-color-primary);
    --color-white-secondary: var(--light-color-secondary);

    /* States */
    --color-success: #38A169;
    --color-success-primary: var(--light-color-primary);
    --color-success-secondary: var(--light-color-secondary);
    --color-success-light: #c6f6d5;
    --color-success-light-primary: #276749;
    --color-success-light-secondary: #2F855A;
    --color-success-dark: #276749;
    --color-success-dark-primary: #F0FFF4;
    --color-success-dark-secondary: #C6F6D5;

    --color-danger: #e53e3e;
    --color-danger-primary: var(--light-color-primary);
    --color-danger-secondary: var(--light-color-secondary);
    --color-danger-light: #fed7d7; // 200
    --color-danger-light-primary: #9B2C2C; // 800
    --color-danger-light-secondary: #C53030; // 700
    --color-danger-dark: #9B2C2C; // 800
    --color-danger-dark-primary: #FFF5F5; // 100
    --color-danger-dark-secondary: #FED7D7; // 200

    --color-info: #3182CE;
    --color-info-primary: var(--dark-color-primary);
    --color-info-secondary: var(--dark-color-secondary);
    --color-info-light: #BEE3F8; // 200
    --color-info-light-primary: #2C5282; // 800
    --color-info-light-secondary: #2B6CB0; // 700
    --color-info-dark: #2C5282; // 800
    --color-info-dark-primary: #EBF8FF; // 100
    --color-info-dark-secondary: #BEE3F8; // 200

    --color-warning: #DD6B20;
    --color-warning-primary: var(--light-color-primary);
    --color-warning-secondary: var(--light-color-secondary);
    --color-warning-light: #FEEBC8; // 200
    --color-warning-light-primary: #9C4221; // 800
    --color-warning-light-secondary: #C05621; // 700
    --color-warning-dark: #9C4221; // 800
    --color-warning-dark-primary: #FFFAF0; // 100
    --color-warning-dark-secondary: #FEEBC8; // 200

    /* User */
    --color-accent-h: var(--app-color-accent-h, 39);
    --color-accent-s: var(--app-color-accent-s, 42%);
    --color-accent-l: var(--app-color-accent-l, 52%);
    --color-light-shader: 10%;
    --color-light-shader2: 25%;
    --color-light-shader3: 30%;
    --color-dark-shader: 30%;
    --color-dark-shader2: 40%;
    --color-dark-shader3: 50%;
    --color-accent: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l));
    --color-accent-light: hsl(var(--color-accent-h), calc(var(--color-accent-s) - var(--color-light-shader)), calc(var(--color-accent-l) + var(--color-light-shader)));
    --color-accent-lighter: hsl(var(--color-accent-h), calc(var(--color-accent-s) - var(--color-light-shader2)), calc(var(--color-accent-l) + var(--color-light-shader2)));
    --color-accent-lightest: hsl(var(--color-accent-h), calc(var(--color-accent-s) - var(--color-light-shader3)), calc(var(--color-accent-l) + var(--color-light-shader3)));
    --color-accent-dark: hsl(var(--color-accent-h), calc(var(--color-accent-s) + var(--color-dark-shader)), calc(var(--color-accent-l) - var(--color-dark-shader)));
    --color-accent-darker: hsl(var(--color-accent-h), calc(var(--color-accent-s) + var(--color-dark-shader2)), calc(var(--color-accent-l) - var(--color-dark-shader2)));
    --color-accent-darkest: hsl(var(--color-accent-h), calc(var(--color-accent-s) + var(--color-dark-shader3)), calc(var(--color-accent-l) - var(--color-dark-shader3)));

    /* User contrasts */
    --color-accent-primary: var(--dark-color-primary);
    --color-accent-light-primary: var(--dark-color-primary);
    --color-accent-lighter-primary: var(--light-color-primary);
    --color-accent-lightest-primary: var(--light-color-primary);
    --color-accent-dark-primary: var(--dark-color-primary);
    --color-accent-darker-primary: var(--dark-color-primary);
    --color-accent-darkest-primary: var(--dark-color-primary);

    --color-accent-secondary: var(--dark-color-secondary);
    --color-accent-light-secondary: var(--dark-color-secondary);
    --color-accent-lighter-secondary: var(--light-color-secondary);
    --color-accent-lightest-secondary: var(--light-color-secondary);
    --color-accent-dark-secondary: var(--dark-color-secondary);
    --color-accent-darker-secondary: var(--dark-color-secondary);
    --color-accent-darkest-secondary: var(--dark-color-secondary);

    /* Contrasts */
    --color-bg-primary: var(--color-primary);
    --color-bg-secondary: var(--color-secondary);
    --color-hover-primary: var(--color-primary);
    --color-hover-secondary: var(--color-secondary);
    --color-input-primary: var(--color-primary);
    --color-input-secondary: var(--color-secondary);
    --color-card-primary: var(--color-primary);
    --color-card-secondary: var(--color-secondary);
}

.theme-light, .theme-light-after ~ * {
    /* Grayscales */
    --color-primary: var(--light-color-primary);
    --color-secondary: var(--light-color-secondary);
    --color-tertiary: var(--light-color-tertiary);
    --color-border: var(--color-gray-400);

    --color-bg: var(--color-gray-100);
    --color-hover: var(--color-gray-300);
    --color-input: var(--color-white);
    --color-card: var(--color-white);

    /* Grayscales contrasts */
    --color-primary-primary: var(--dark-color-primary);
    --color-primary-secondary: var(--dark-color-secondary);
    --color-secondary-primary: var(--dark-color-primary);
    --color-secondary-secondary: var(--dark-color-primary);
    --color-tertiary-primary: var(--light-color-primary);
    --color-tertiary-secondary: var(--light-color-primary);
    --color-border-primary: var(--light-color-primary);
    --color-border-secondary: var(--light-color-secondary);

    --color-bg-primary: var(--light-color-primary);
    --color-bg-secondary: var(--light-color-secondary);
    --color-hover-primary: var(--light-color-primary);
    --color-hover-secondary: var(--light-color-secondary);
    --color-input-primary: var(--light-color-primary);
    --color-input-secondary: var(--light-color-secondary);
    --color-card-primary: var(--light-color-primary);
    --color-card-secondary: var(--light-color-secondary);

    /* User */
    --color-accent-1: var(--color-accent-light);
    --color-accent-1-primary: var(--color-accent-light-primary);
    --color-accent-1-secondary: var(--color-accent-light-secondary);
    --color-accent-2: var(--color-accent-lighter);
    --color-accent-2-primary: var(--color-accent-lighter-primary);
    --color-accent-2-secondary: var(--color-accent-lighter-secondary);
    --color-accent-3: var(--color-accent-lightest);
    --color-accent-3-primary: var(--color-accent-lightest-primary);
    --color-accent-3-secondary: var(--color-accent-lightest-secondary);

    /* States */
    --color-success-theme: var(--color-success-light);
    --color-success-theme-primary: var(--color-success-light-primary);
    --color-success-theme-secondary: var(--color-success-light-secondary);
    --color-danger-theme: var(--color-danger-light);
    --color-danger-theme-primary: var(--color-danger-light-primary);
    --color-danger-theme-secondary: var(--color-danger-light-secondary);
    --color-warning-theme: var(--color-warning-light);
    --color-warning-theme-primary: var(--color-warning-light-primary);
    --color-warning-theme-secondary: var(--color-warning-light-secondary);
    --color-info-theme: var(--color-info-light);
    --color-info-theme-primary: var(--color-info-light-primary);
    --color-info-theme-secondary: var(--color-info-light-secondary);
}

.theme-dark, .theme-dark-after ~ * {
    /* Grayscales */
    --color-primary: var(--dark-color-primary);
    --color-secondary: var(--dark-color-secondary);
    --color-tertiary: var(--dark-color-tertiary);
    --color-border: var(--color-gray-700);

    --color-bg: var(--color-black);
    --color-hover: var(--color-gray-700);
    --color-input: var(--color-black);
    --color-card: var(--color-black);

    /* Grayscales contrasts */
    --color-primary-primary: var(--light-color-primary);
    --color-primary-secondary: var(--light-color-secondary);
    --color-secondary-primary: var(--light-color-primary);
    --color-secondary-secondary: var(--light-color-primary);
    --color-tertiary-primary: var(--dark-color-primary);
    --color-tertiary-secondary: var(--dark-color-primary);
    --color-border-primary: var(--dark-color-primary);
    --color-border-secondary: var(--dark-color-primary);

    --color-bg-primary: var(--dark-color-primary);
    --color-bg-secondary: var(--dark-color-secondary);
    --color-hover-primary: var(--dark-color-primary);
    --color-hover-secondary: var(--dark-color-primary);
    --color-input-primary: var(--dark-color-primary);
    --color-input-secondary: var(--dark-color-secondary);
    --color-card-primary: var(--dark-color-primary);
    --color-card-secondary: var(--dark-color-secondary);

    /* User */
    --color-accent-1: var(--color-accent-dark);
    --color-accent-1-primary: var(--color-accent-dark-primary);
    --color-accent-1-secondary: var(--color-accent-dark-secondary);
    --color-accent-2: var(--color-accent-darker);
    --color-accent-2-primary: var(--color-accent-darker-primary);
    --color-accent-2-secondary: var(--color-accent-darker-secondary);
    --color-accent-3: var(--color-accent-darkest);
    --color-accent-3-primary: var(--color-accent-darkest-primary);
    --color-accent-3-secondary: var(--color-accent-darkest-secondary);

    /* States */
    --color-success-theme: var(--color-success-dark);
    --color-success-theme-primary: var(--color-success-dark-primary);
    --color-success-theme-secondary: var(--color-success-dark-secondary);
    --color-danger-theme: var(--color-danger-dark);
    --color-danger-theme-primary: var(--color-danger-dark-primary);
    --color-danger-theme-secondary: var(--color-danger-dark-secondary);
    --color-warning-theme: var(--color-warning-dark);
    --color-warning-theme-primary: var(--color-warning-dark-primary);
    --color-warning-theme-secondary: var(--color-warning-dark-secondary);
    --color-info-theme: var(--color-info-dark);
    --color-info-theme-primary: var(--color-info-dark-primary);
    --color-info-theme-secondary: var(--color-info-dark-secondary);
}