@use "sass:color";

$_shade-labels: ("05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95");
@mixin _generate-colour-classes($name, $colours) {
    @for $i from 1 through length($_shade-labels) {
        $shade: nth($_shade-labels, $i);
        $colour: nth($colours, $i);
        
        .fg-#{$name}--#{$shade} {
            color: $colour;
        }
        
        .bg-#{$name}--#{$shade} {
            background-color: $colour;
        }
    }
}

$brand: #df3062;
// Generated from https://maketintsandshades.com/#df3062
$brand--05: #fceaef;
$brand--10: #f9d6e0;
$brand--20: #f2acc0;
$brand--30: #ec83a1;
$brand--40: #e55981;
$brand--50: $brand;
$brand--60: #b2264e;
$brand--70: #861d3b;
$brand--80: #591327;
$brand--90: #2d0a14;
$brand--95: #16050a;

@include _generate-colour-classes("brand", ($brand--05, $brand--10, $brand--20, $brand--30, $brand--40, $brand--50, $brand--60, $brand--70, $brand--80, $brand--90, $brand--95));

$grey: #888888;
// Generated from https://maketintsandshades.com/#888888
$grey--05: #f3f3f3;
$grey--10: #e7e7e7;
$grey--20: #cfcfcf;
$grey--30: #b8b8b8;
$grey--40: #a0a0a0;
$grey--50: $grey;
$grey--60: #6d6d6d;
$grey--70: #525252;
$grey--80: #363636;
$grey--90: #1b1b1b;
$grey--95: #0e0e0e;

@include _generate-colour-classes("grey", ($grey--05, $grey--10, $grey--20, $grey--30, $grey--40, $grey--50, $grey--60, $grey--70, $grey--80, $grey--90, $grey--95));

.fg-white {
    color: white;
}

$panel-background: $grey--10;  // for use in headers and footers
