:root {
    --color-primary: #39C1CD;
    --color-secondary: #FFAAA5;
    --color-tertiary: #a1d9f7;

    --color-light-lvl1: #ffffff;
    --color-light-lvl2: #f8fafc;
    --color-light-lvl3: #f1f5f9;

    --color-dark-lvl1: #071719;
    --color-dark-lvl2: #4b595a;
    --color-dark-lvl3: #697a7c;

    --gradient-primary: linear-gradient(145deg, #39C1CD 0%, #a1d9f7 100%);
    --gradient-all-key-colors: linear-gradient(145deg, #39C1CD 0%, #FFAAA5 50%, #a1d9f7 100%);
}

/*https://mycolor.space/?hex=%23008444&sub=1*/


/* Color Showcase Styles */
.color-group {
    margin-bottom: 3rem;
}

.color-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.color-card {
    text-align: center;
}

.color-sample {
    height: 80px;
    width: 100%;
    border-radius: 10rem;
    margin-bottom: 0.5rem;
}

/* Color samples */
.primary .color-sample {
    background: var(--color-primary);
}

.primary-dark .color-sample {
    background: var(--color-secondary);
}

.light-1 .color-sample {
    background: var(--color-light-lvl1);
    border: 1px solid black;
}

.light-2 .color-sample {
    background: var(--color-light-lvl2);
    border: 1px solid black;
}

.light-3 .color-sample {
    background: var(--color-light-lvl3);
    border: 1px solid black;
}

.dark-1 .color-sample {
    background: var(--color-dark-lvl1);
}

.dark-2 .color-sample {
    background: var(--color-dark-lvl2);
}

.dark-3 .color-sample {
    background: var(--color-dark-lvl3);
}