eeg_certs/frontend/src/colors.css

/*
    Material colors
*/

/*
 *   GREEN
 */
 :root {
    --c-green-primary: #7cdc6d;
    --c-green-on-primary: #003a02;
    --c-green-primary-container: #005304;
    --c-green-on-primary-container: #97f986;
    --c-green-background: #1a1c18;
    --c-green-on-background: #e2e3dd;
    --c-green-surface: #1a1c18;
    --c-green-on-surface: #e2e3dd;
    --c-green-outline: #8d9387;
    --c-green-surface-variant: #43483f;
    --c-green-on-surface-variant: #c3c8bc;

    --c-green-success: #adc6ff;
    --c-green-on-success: #002e69;
}
@media (prefers-color-scheme: light) {
    :root {
        --c-green-primary: #006e08;
        --c-green-on-primary: #ffffff;
        --c-green-primary-container: #97f986;
        --c-green-on-primary-container: #002201;
        --c-green-background: #fcfdf6;
        --c-green-on-background: #1a1c18;
        --c-green-surface: #fcfdf6;
        --c-green-on-surface: #1a1c18;
        --c-green-outline: #73796e;
        --c-green-surface-variant: #dfe4d8;
        --c-green-on-surface-variant: #43483f;
    }
}

/*
 *   BLUE
 */
:root {
    --c-blue-primary: #adc6ff;
    --c-blue-on-primary: #002e69;
    --c-blue-primary-container: #0e448e;
    --c-blue-on-primary-container: #d8e2ff;
    --c-blue-background: #1b1b1f;
    --c-blue-on-background: #e3e2e6;
    --c-blue-surface: #1b1b1f;
    --c-blue-on-surface: #e3e2e6;
    --c-blue-outline: #8e9099;
    --c-blue-surface-variant: #44474f;
    --c-blue-on-surface-variant: #c4c6d0;
}
@media (prefers-color-scheme: light) {
    :root {
        --c-blue-primary: #315da8;
        --c-blue-on-primary: #ffffff;
        --c-blue-primary-container: #d8e2ff;
        --c-blue-on-primary-container: #001a41;
        --c-blue-background: #fefbff;
        --c-blue-on-background: #1b1b1f;
        --c-blue-surface: #fefbff;
        --c-blue-on-surface: #1b1b1f;
        --c-blue-outline: #74777f;
        --c-blue-surface-variant: #e1e2ec;
        --c-blue-on-surface-variant: #44474f;
    }
}

/*
 *   YELLOW
 */
:root {
    --c-yellow-primary: #f5bf31;
    --c-yellow-on-primary: #3f2e00;
    --c-yellow-primary-container: #5b4300;
    --c-yellow-on-primary-container: #ffdf9b;
    --c-yellow-background: #1e1b16;
    --c-yellow-on-background: #e9e1d9;
    --c-yellow-surface: #1e1b16;
    --c-yellow-on-surface: #e9e1d9;
    --c-yellow-outline: #999080;
    --c-yellow-surface-variant: #4d4639;
    --c-yellow-on-surface-variant: #d0c5b4;
}
@media (prefers-color-scheme: light) {
    :root {
        --c-yellow-primary: #785a00;
        --c-yellow-on-primary: #ffffff;
        --c-yellow-primary-container: #ffdf9b;
        --c-yellow-on-primary-container: #251a00;
        --c-yellow-background: #fffbff;
        --c-yellow-on-background: #1e1b16;
        --c-yellow-surface: #fffbff;
        --c-yellow-on-surface: #1e1b16;
        --c-yellow-outline: #7f7667;
        --c-yellow-surface-variant: #ede1cf;
        --c-yellow-on-surface-variant: #4d4639;
    }
}


/*
 *   PINK
 */
:root {
    --c-pink-primary: #ffade5;
    --c-pink-on-primary: #5e0051;
    --c-pink-primary-container: #80156e;
    --c-pink-on-primary-container: #ffd7ef;
    --c-pink-background: #1f1a1d;
    --c-pink-on-background: #eae0e3;
    --c-pink-surface: #1f1a1d;
    --c-pink-on-surface: #eae0e3;
    --c-pink-outline: #9b8d94;
    --c-pink-surface-variant: #4f444a;
    --c-pink-on-surface-variant: #d2c2ca;
}
@media (prefers-color-scheme: light) {
    :root {
        --c-pink-primary: #9d3288;
        --c-pink-on-primary: #ffffff;
        --c-pink-primary-container: #ffd7ef;
        --c-pink-on-primary-container: #3a0031;
        --c-pink-background: #fffbff;
        --c-pink-on-background: #1f1a1d;
        --c-pink-surface: #fffbff;
        --c-pink-on-surface: #1f1a1d;
        --c-pink-outline: #81737a;
        --c-pink-surface-variant: #efdee6;
        --c-pink-on-surface-variant: #4f444a;
    }
}

/*
 * ORANGE
 */
:root {
    --c-orange-primary: #ffb86d;
    --c-orange-on-primary: #492900;
    --c-orange-primary-container: #683c00;
    --c-orange-on-primary-container: #ffdcbd;
    --c-orange-background: #201b16;
    --c-orange-on-background: #ebe1d9;
    --c-orange-surface: #201b16;
    --c-orange-on-surface: #ebe1d9;
    --c-orange-outline: #9d8e81;
    --c-orange-surface-variant: #50453a;
    --c-orange-on-surface-variant: #d5c3b5;
}
@media (prefers-color-scheme: light) {
    :root {
        --c-orange-primary: #9e4300;
        --c-orange-on-primary: #ffffff;
        --c-orange-primary-container: #ffdbcb;
        --c-orange-on-primary-container: #341100;
        --c-orange-background: #fffbff;
        --c-orange-on-background: #201a18;
        --c-orange-surface: #fffbff;
        --c-orange-on-surface: #201a18;
        --c-orange-outline: #85736c;
        --c-orange-surface-variant: #f4ded4;
        --c-orange-on-surface-variant: #52443d;
    }
}

/*
 * RED
 */
 :root {
    --c-red-primary: #ffb4a8;
    --c-red-on-primary: #690100;
    --c-red-primary-container: #930100;
    --c-red-on-primary-container: #ffdad4;
    --c-red-background: #201a19;
    --c-red-on-background: #ede0dd;
    --c-red-surface: #201a19;
    --c-red-on-surface: #ede0dd;
    --c-red-outline: #a08c89;
    --c-red-surface-variant: #534341;
    --c-red-on-surface-variant: #d8c2be;
}
@media (prefers-color-scheme: light) {
    :root {
        --c-red-primary: #c00100;
        --c-red-on-primary: #ffffff;
        --c-red-primary-container: #ffdad4;
        --c-red-on-primary-container: #410000;
        --c-red-background: #fffbff;
        --c-red-on-background: #201a19;
        --c-red-surface: #fffbff;
        --c-red-on-surface: #201a19;
        --c-red-outline: #857370;
        --c-red-surface-variant: #f5ddda;
        --c-red-on-surface-variant: #534341;
    }
}