/* ROOT VARIABLES */
:root {
    /* COLORS */
    --color-petrol: hsl(184.19, 100%, 36.47%);
    --color-petrol-60: hsla(184.19, 100%, 36.47%, 0.6);
    --color-dark-petrol: hsl(188.97, 100%, 20.98%);
    --color-white: hsl(0, 0%, 100%);
    --color-black: hsl(183, 100%, 7%);
    --color-green: hsl(189, 100%, 14%);
    --color-blue-100: hsl(201, 86%, 86%);
    --color-blue-50: hsl(202, 88%, 93%);
    --color-yellow-100: hsl(60, 67%, 84%);
    --color-yellow-50: hsl(60, 64%, 94%);
    --color-yellow-500: hsl(55, 98%, 52%);
    --color-pink: hsl(345, 79%, 62%);

    --color-whatsapp: hsl(131, 69%, 52%);

    --color-dark: var(--color-black);
    --color-light: var(--color-white);
    --color-primary: var(--color-petrol);
    --color-secondary: var(--color-dark-petrol);
    --color-text: var(--color-black);
    --color-danger: var(--color-pink);

    --outline-color: var(--color-secondary);
}