@import "css/tailwind.css";
:root {
    --color-primary-light: #d4d9ff;
    --color-primary: #4e55f3;
    --color-primary-dark: #818adc;

    --color-gold: #ffd150;

    --color-white: #ffffff;
    --color-black: #000000;
    --color-grey: #e3e3e3;
    --color-grey-dark: #646464;
    --color-grey-light: #eaeaea;
    --color-white-50: rgba(255, 255, 255, 0.5);

    --color-red: #ff4d4d;

    --status-red: #ff2d2d;
    --status-orange: #ffa94b;
    --status-green: #0eab3e;
    --status-blue: #1371ff;
}
.section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.primary-background, .primary-button {
    background-color: #4e55f3;
}
.white-text {
    color: white;
}
.primary-text {
    color: #4e55f3;
}
.primary-text-dark {
    color: #818adc;
}
.primary-button:hover {
    background-color: #818adc;
}
.hover\:primary-text:hover {
    --tw-bg-opacity: 1;
    color: #4e55f3;
}
.hover\:primary-text-dark:hover {
    --tw-bg-opacity: 1;
    color: #818adc;
}

.png-shadow {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

.green-button {
    background-color: #82da98;
}
.green-button:hover {
    background-color: #73bf86;
}
.green-text {
    color: #82da98;
}
.hover\:green-text-dark:hover {
    --tw-bg-opacity: 1;
    color: #73bf86;
}

.rounded {
    border-radius: 16px;
}

.bg-green {
    background-color: #82da98;
}

.bg-primary {
    background-color: var(--color-primary);
}

.color-green {
    fill: var(--status-green);
    color: var(--status-green);
}

.color-orange {
    fill: var(--status-orange);
    color: var(--status-orange);
}

.color-primary {
    fill: var(--color-primary);
    color: var(--color-primary);
}

.color-red {
    fill: var(--color-red);
    color: var(--color-red);
}

.text-gray-light {
    color: var(--color-grey);
}

.text-gray {
    color: var(--color-grey);
}

.text-gray-dark {
    color: var(--color-grey-dark);
}