@import url(../css/variables.css);

:root{
    --theme-bg: #f3f4ff; 
    --theme: #d1d2ff; 
    --theme-fg: #4f51ae; 
    --theme-red: #dc2626;
    --theme-red-20: #ffd8d6;
    --theme-red-10: #ffebea;
}

details, 
.details,
.coloured-bg,
#showcase .glass{
    background-color: var(--theme);
}

main h2, 
.themed-text{
    color: var(--theme-fg);
}

.icon-text svg{
    fill: var(--theme-fg);
}

.cons .themed-text{
    color: var(--theme-red);
}

.cons svg{
    fill: var(--theme-red);
}

.textbox.bordered{
    border: 1px solid var(--theme-fg);
}

.textbox.cons.bordered{
    border: 1px solid var(--theme-red);
}

.textbox li{
    font-size: var(--font-sm); 
    line-height: var(--line-sm);
}

.textbox .icon-text{
    background-color: var(--theme); 
    color: var(--theme-fg);
}

.cons.coloured-bg, 
.cons .pie-chart-in{
    background-color: var(--theme-red-10);
}

.cons .icon-text{
    background-color: var(--theme-red-20); 
    color: var(--theme-red);
}

.link-button.solid{
    background-color: var(--theme);
    border-color: var(--theme);
}

#showcase{
    background-color: #afb0ff;
}

#showcase .cons,
details[name="painpoints"], 
.details.cons{
    background-color: var(--theme-red-20);
}

@media (any-hover: hover) {
    .link-button.solid:hover{
        background-color: var(--theme-bg); 
        color: var(--theme-fg); 
        border-color: var(--theme-fg);
    }    
    .link-button.solid:hover svg{
        fill: var(--theme-fg);
    }
}