:root {--color-primary: #6f6af8;
    --color-primary-light: hsl(242, 91%, 69%, 18%);
    --color-primary-variant: #5854c7;
    --color-red: #da0f3f;
    --color-red-light: hsl(346, 87%, 46%, 15%);
    --color-green: #00c476;
    --color-green-light: hsl(156, 100%, 38%, 15%);
    --color-gray-900: #1e1e66;
    --color-gray-700: #2d2b7c;
    --color-gray-300: rgba(242, 242, 254, 0.3);
    --color-gray-200: rgba(242, 242, 254, 0.7);
    --color-white: #f2f2fe;
    --color-bg: #0f0f3e;

    --transition: all 300ms ease;

    --container-width-lg: 74%;
    --container-width-md: 88%;
    --form-width: 40%;

    --card-border-radius-1: 0.3rem;
    --card-border-radius-2: 0.5rem;
    --card-border-radius-3: 0.8rem;
    --card-border-radius-4: 2rem;
    --card-border-radius-5: 5rem;
}