@use './mixin' as mixins;

$palette: (
    white: (
        100: #ffffff,
    ),
    gray: (
        5: #f5f6f8,
        10: #e8e8e8,
        15: #d1d1d1,
        20: #ccc,
    ),
    black: (
        10: #f3f3f3,
        15: #eeeeee,
        20: #e0e0e0,
        30: #b2cbca,
        40: #a3a3a3,
        60: #747474,
        80: #323033,
        100: #181818,
    ),
    red: (
        10: #fdedee,
        20: #efc0c1,
        40: #f7b9bb,
        60: #e88487,
        80: #df6064,
        100: #eb5055,
    ),
    orange: (
        5: #f6e4d9,
        10: #e8cbbf,
        20: #e1ba9e,
        40: #e4a985,
        60: #f1a05d,
        70: #f2994a,
        80: #ee7a34,
        100: #ef7128,
    ),
    blue: (
        20: #eaedfcff,
        40: #b3ceef,
        60: #6d96e8,
        80: #4285f4,
        100: #4284d7,
    ),
    green: (
        10: #e5f8f4,
        20: #baf4e0,
        40: #5dbfbc,
        60: #46c4c0,
        80: #21b18e,
        100: #01af8d,
    ),
);

:root {
    @each $family, $set in $palette {
        @each $saturate, $clr in $set {
            #{mixins.generateCssClrVar($family, $saturate)}: #{$clr};
        }
    }

    --clr-base-accent: #0d1c2b;
    --clr-txt: rgba(0, 0, 0, 0.87);
    --clr-white-rgb: 255, 255, 255;

    // Buttons
    --rt-button-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 18px 0 rgba(0, 0, 0, 0.14);
}