@use "colors" as *;
@use "spacing" as *;
:root {
    --foundry-dark-gray: rgba(52, 52, 52, 0.85);
    --foundry-purple-background-hover: rgba(60, 0, 120, 0.5);
    --foundry-purple-shadow-hover: #9b8dff;

    --foundry-purple-border: #3b1893;
    --foundry-purple-background: rgba(30, 0, 60, 0.5);
    --box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.36) inset;
    $themeColours: (
        "pink": #dc51ac,
        "red": #d64651,
        "orange": #e55937,
    );

    @each $themeColour, $i in $themeColours {
        body {
            &.#{$themeColour} {
                background-color: $i;
            }
        }
    }
    @each $color, $shades in $colors {
        @each $shade, $value in $shades {
            --color-#{$color}-#{$shade}: #{$value};
        }
    }
    @each $size, $value in $spacing {
        --space-#{$size}: #{$value};
    }
}