@use '@lucas-labs/lui-micro' as lui;
@use './_utils/color-utils' as c;
@use './theme' as theme;
@use './vars' as vars;

$is-dark: true;
$brand: #a6c6f7;

$colors: (
    primary: c.variants($brand),    
    secondary: c.variants(hsl(240, 18%, 14%)), // same as elevation/6
    text: #e6edf3,
    subtle: hsl(240, 10%, 70%), // same as elevation/10
    palette: (
        'red':        c.variants(#f38ba8), // red
        'orange':     c.variants(#fab387), // peach
        'yellow':     c.variants(#f9e2af), // yellow
        'olive':      c.variants(#e2f095),
        'green':      c.variants(#00E676), // green
        'teal':       c.variants(#94e2d5), // teal
        'blue':       c.variants(#89b4fa), // blue
        'violet':     c.variants(#b4befe), // lavender
        'purple':     c.variants(#9b6bf5), // mauve
        'pink':       c.variants(#f5c2e7), // pink
        'brown':      c.variants(#f2cdcd), // flamingo
        'black':      c.variants(#181825), // black
        'white':      c.variants(#e6edf3), // white
    ),
    elevation: (
        '1':  hsl(240, 33%, 01%),
        '2':  hsl(240, 33%, 04%),
        '3':  hsl(240, 33%, 06%),
        '4':  hsl(240, 30%, 08%),
        '5':  hsl(240, 28%, 12%),
        '6':  hsl(240, 25%, 14%),
        '7':  hsl(240, 20%, 30%),
        '8':  hsl(240, 20%, 40%),
        '9':  hsl(240, 10%, 50%),
        '10': hsl(240, 10%, 70%),
        '11': hsl(240, 10%, 80%),
        '12': hsl(240, 10%, 90%),
    )
);

// init lui-micro, css-vars only (no reboot, no basic)
@include lui.init(
    $theme: (colors: $colors, variables: vars.$variables),
    $options: (
        reboot: false,
        basic: false,
        fg-var-name: 'text',
        bg-var-name: 'elevation/1',
    ),
);

@include theme.make-theme($is-dark);