/* Setup color variables */
:root {
    /* Shades */
    --s-0: 0%;
    --s-10: 10%;
    --s-20: 20%;
    --s-30: 30%;
    --s-40: 40%;
    --s-50: 50%;
    --s-60: 60%;
    --s-70: 70%;
    --s-80: 80%;
    --s-90: 90%;
    --s-100: 100%;

    /* Black shades */
    --black: var(--black-100);
    --black-0: hsl(0, 0%, var(--s-100));
    --black-10: hsl(0, 0%, var(--s-90));
    --black-20: hsl(0, 0%, var(--s-80));
    --black-30: hsl(0, 0%, var(--s-70));
    --black-40: hsl(0, 0%, var(--s-60));
    --black-50: hsl(0, 0%, var(--s-50));
    --black-60: hsl(0, 0%, var(--s-40));
    --black-70: hsl(0, 0%, var(--s-30));
    --black-80: hsl(0, 0%, var(--s-20));
    --black-90: hsl(0, 0%, var(--s-10));
    --black-100: hsl(0, 0%, var(--s-0));

    /* White shades */
    --white: var(--white-100);
    --white-0: hsl(0, 0%, var(--s-0));
    --white-10: hsl(0, 0%, var(--s-10));
    --white-20: hsl(0, 0%, var(--s-20));
    --white-30: hsl(0, 0%, var(--s-30));
    --white-40: hsl(0, 0%, var(--s-40));
    --white-50: hsl(0, 0%, var(--s-50));
    --white-60: hsl(0, 0%, var(--s-60));
    --white-70: hsl(0, 0%, var(--s-70));
    --white-80: hsl(0, 0%, var(--s-80));
    --white-90: hsl(0, 0%, var(--s-90));
    --white-100: hsl(0, 0%, var(--s-100));

    /* Colors and highlighting */
    /* System colors */
    --background-light: var(--white);
    --background: var(--white-90);
    --background-dark: var(--white-80);

    /* Success */
    --success-hue: 140;
    --success: var(--success-50);
    --success-10: hsl(var(--success-hue), 100%, var(--s-10));
    --success-20: hsl(var(--success-hue), 100%, var(--s-20));
    --success-30: hsl(var(--success-hue), 100%, var(--s-30));
    --success-40: hsl(var(--success-hue), 100%, var(--s-40));
    --success-50: hsl(var(--success-hue), 100%, var(--s-50));
    --success-60: hsl(var(--success-hue), 100%, var(--s-60));
    --success-70: hsl(var(--success-hue), 100%, var(--s-70));
    --success-80: hsl(var(--success-hue), 100%, var(--s-80));
    --success-90: hsl(var(--success-hue), 100%, var(--s-90));
    --success-100: hsl(var(--success-hue), 100%, var(--s-100));

    /* Information */
    --info-hue: 200;
    --info: var(--info-50);
    --info-10: hsl(var(--info-hue), 100%, var(--s-10));
    --info-20: hsl(var(--info-hue), 100%, var(--s-20));
    --info-30: hsl(var(--info-hue), 100%, var(--s-30));
    --info-40: hsl(var(--info-hue), 100%, var(--s-40));
    --info-50: hsl(var(--info-hue), 100%, var(--s-50));
    --info-60: hsl(var(--info-hue), 100%, var(--s-60));
    --info-70: hsl(var(--info-hue), 100%, var(--s-70));
    --info-80: hsl(var(--info-hue), 100%, var(--s-80));
    --info-90: hsl(var(--info-hue), 100%, var(--s-90));
    --info-100: hsl(var(--info-hue), 100%, var(--s-100));

    /* Warning */
    --warning-hue: 40;
    --warning: var(--warning-50);
    --warning-10: hsl(var(--warning-hue), 100%, var(--s-10));
    --warning-20: hsl(var(--warning-hue), 100%, var(--s-20));
    --warning-30: hsl(var(--warning-hue), 100%, var(--s-30));
    --warning-40: hsl(var(--warning-hue), 100%, var(--s-40));
    --warning-50: hsl(var(--warning-hue), 100%, var(--s-50));
    --warning-60: hsl(var(--warning-hue), 100%, var(--s-60));
    --warning-70: hsl(var(--warning-hue), 100%, var(--s-70));
    --warning-80: hsl(var(--warning-hue), 100%, var(--s-80));
    --warning-90: hsl(var(--warning-hue), 100%, var(--s-90));
    --warning-100: hsl(var(--warning-hue), 100%, var(--s-100));

    /* Error */
    --error-hue: 10;
    --error: var(--error-50);
    --error-10: hsl(var(--error-hue), 100%, var(--s-10));
    --error-20: hsl(var(--error-hue), 100%, var(--s-20));
    --error-30: hsl(var(--error-hue), 100%, var(--s-30));
    --error-40: hsl(var(--error-hue), 100%, var(--s-40));
    --error-50: hsl(var(--error-hue), 100%, var(--s-50));
    --error-60: hsl(var(--error-hue), 100%, var(--s-60));
    --error-70: hsl(var(--error-hue), 100%, var(--s-70));
    --error-80: hsl(var(--error-hue), 100%, var(--s-80));
    --error-90: hsl(var(--error-hue), 100%, var(--s-90));
    --error-100: hsl(var(--error-hue), 100%, var(--s-100));

    /* Brand colors */
    --primary-hue: 190;
    --primary: var(--primary-50);
    --primary-10: hsl(var(--primary-hue), 100%, var(--s-10));
    --primary-20: hsl(var(--primary-hue), 100%, var(--s-20));
    --primary-30: hsl(var(--primary-hue), 100%, var(--s-30));
    --primary-40: hsl(var(--primary-hue), 100%, var(--s-40));
    --primary-50: hsl(var(--primary-hue), 100%, var(--s-50));
    --primary-60: hsl(var(--primary-hue), 100%, var(--s-60));
    --primary-70: hsl(var(--primary-hue), 100%, var(--s-70));
    --primary-80: hsl(var(--primary-hue), 100%, var(--s-80));
    --primary-90: hsl(var(--primary-hue), 100%, var(--s-90));
    --primary-100: hsl(var(--primary-hue), 100%, var(--s-100));

    /* Accent color */
    --accent-hue: 160;
    --accent: var(--accent-50);
    --accent-10: hsl(var(--accent-hue), 100%, var(--s-10));
    --accent-20: hsl(var(--accent-hue), 100%, var(--s-20));
    --accent-30: hsl(var(--accent-hue), 100%, var(--s-30));
    --accent-40: hsl(var(--accent-hue), 100%, var(--s-40));
    --accent-50: hsl(var(--accent-hue), 100%, var(--s-50));
    --accent-60: hsl(var(--accent-hue), 100%, var(--s-60));
    --accent-70: hsl(var(--accent-hue), 100%, var(--s-70));
    --accent-80: hsl(var(--accent-hue), 100%, var(--s-80));
    --accent-90: hsl(var(--accent-hue), 100%, var(--s-90));
    --accent-100: hsl(var(--accent-hue), 100%, var(--s-100));

    /* Text colors */
    --text: var(--black-80);
    --text-secondary: var(--black-40);
    --text-button: var(--white-100);

    /* Text highlighting colors */
    --highlight-primary: var(--primary);
    --highlight-accent: var(--accent);
    --highlight-secondary: var(--text-secondary);
}