@use 'catppuccin';

@each $flavor, $color in catppuccin.$palette {
    body.#{$flavor} {
        --#{$prefix}-bg: #{map-get($color, 'base')};
        --#{$prefix}-crust: #{map-get($color, 'crust')};
        --#{$prefix}-mantle: #{map-get($color, 'mantle')};
        --#{$prefix}-surface0: #{map-get($color, 'surface0')};

        --#{$prefix}-nav-bg: #{map-get($color, 'crust')};
        --#{$prefix}-nav-color: #{map-get($color, 'text')};
        --#{$prefix}-nav-logo-bg: #{map-get($color, 'rosewater')};
        --#{$prefix}-nav-hover:  #{map-get($color, 'surface2')};
        --#{$prefix}-nav-active-bg: #{map-get($color, 'mauve')};
        --#{$prefix}-nav-active-color: #{map-get($color, 'base')};
    }
}

.c-s0 {
    background-color: var(--#{$prefix}-surface0);
}
.c-crust {
    background-color: var(--#{$prefix}-crust);
}
.c-mantle {
    background-color: var(--#{$prefix}-mantle);
}