/* colors */
:root {
    /* background */
    --color-primary: #1ebbf0;
    --color-secondary: #303B86;
    --color-accent: hsl(0, 0%, 85%);
    --color-base-100: #fff;
    --color-base-200: #EDEDED;
    --color-error: hsl(354, 70%, 54%);
    /* text */
    --color-on-primary: #fff;
    --color-on-secondary: #ffffff;
    --color-on-accent: #fff;
    --color-on-base: #303B86;
    --color-on-base-light: hsl(218, 6%, 47%);
    --color-on-error: hsl(354, 70%, 54%);
    /* focus */
    --color-focus-primary: hsl(134, 69%, 50%);
    --color-focus-secondary: hsl(232, 47%, 20%);
    --color-focus-accent: hsl(0, 0%, 90%);
    /* title colors */
    --color-s-red: #f20000;
    --color-s-blue: blue;
    --color-s-green: green;
    --color-s-dark-gray: darkgray;
    --color-s-light-gray: lightgray;
    /* border radius */
    --rounded-btn: 0;
    --rounded-box: 0;
}