/* General colors used throughout the app */
:root {
    --clr-primary-default: hsl(210, 100%, 45%);
    --clr-primary-hover: hsl(210, 100%, 60%);
    --clr-primary-pressed: hsl(210, 100%, 40%);
    --clr-primary-disabled: hsl(210, 100%, 90%);

    --clr-secondary-default: hsl(165, 100%, 45%);
    --clr-secondary-hover: hsl(165, 86%, 50%);
    --clr-secondary-pressed: hsl(165, 90%, 40%);
    --clr-secondary-disabled: hsl(165, 40%, 80%);

    --clr-chat-you: hsl(210, 100%, 44%);
    --clr-chat-them: hsl(165, 90%, 27%);

    --clr-danger-default: hsl(0, 100%, 66%);
    --clr-danger-default-text: hsl(0, 100%, 40%);

    --clr-background: hsl(240, 33%, 96%);
    --clr-background-gradient-start: hsl(210, 70%, 20%);
    --clr-background-gradient-end: hsl(200, 50%, 20%);

    /* Rounded corners for a gentler look */
    --border-radius: 1rem;
}

/* Pick your font */
.body {
    font-family: "Inter", sans-serif;
    font-weight: 500;
}

/* And any other css you want to add ...*/