@use 'sass:map';
@use 'mixins.scss' as *;
@use 'element-plus/theme-chalk/src/dark/css-vars.scss';

// Background
$bg-color: () !default;
$bg-color: map.merge(
    (
        '': #101722,
        'overlay': #182131,
        'soft': #111c2a,
        'muted': #0d1420,
    ),
    $bg-color
);

// Border
$border-color: () !default;
$border-color: map.merge(
    (
        '': #2d3a4c,
        'soft': #263244,
        'strong': #3a4a61,
    ),
    $border-color
);

html.dark {
    @include set-component-css-var('bg-color', $bg-color);
    @include set-component-css-var('border-color', $border-color);

    --ba-surface-soft: #111c2a;
    --ba-surface-muted: #0d1420;
    --ba-text-muted: #94a3b8;
    --ba-shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.34);
    --ba-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.28);
    --el-color-primary: #5b86f0;
    --el-color-primary-light-3: #406fcf;
    --el-color-primary-light-5: #2e4f93;
    --el-color-primary-light-7: #203b6f;
    --el-color-primary-light-8: #1b315a;
    --el-color-primary-light-9: #162846;
    --el-color-primary-dark-2: #8eadf5;
    --el-text-color-primary: #e5edf7;
    --el-text-color-regular: #cbd5e1;
    --el-text-color-secondary: #94a3b8;
    --el-fill-color-light: #111c2a;
    --el-fill-color-lighter: #0d1420;
}
