:root {
    // palette
    --gray-10: #fff;
    --gray-70: #f7f7f7;
    --gray-80: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eee;
    --gray-300: #ddd;
    --gray-400: #cacaca;
    --gray-500: #aaa;
    --gray-600: #999;
    --gray-700: #666;
    --gray-800: #333;

    // background
    --bg-color-default: #fff;
    --bg-color-panel: #fff;
    --bg-color-float: #fff;

    // text
    --text-color: #333;

    // image preview
    --image-preview-bg-color: #333;
    --image-preview-backdrop-bg-color: rgba(51, 51, 51, 0.95);
    --image-preview-text-color: #fff;
    --image-preview-action-bg-color: rgba(255, 255, 255, 0.2);
    --image-preview-action-icon-color: #fff;
    --image-preview-switch-bg-color: #666;
    --image-preview-switch-hover-bg-color: #aaa;
    --image-preview-switch-icon-color: #aaa;
    --image-preview-switch-icon-hover-color: #666;

    // menu dark
    --menu-theme-dark-text-color: #ddd;
    --menu-theme-dark-icon-color: #ddd;
    --menu-theme-dark-divider-color: #666;
    --menu-theme-dark-hover-color: #ddd;

    // carousel
    --carousel-control-bg-color: #f7f7f74d;
    --carousel-control-hover-bg-color: #f7f7f799;
    --carousel-dot-bg-color: #ffffff80;

    // layout
    --layout-header-box-shadow: 0 4px 8px 0px rgba(0 0 0 / 3%);
    --layout-sidebar-light-bg-color: #fbfbfb;

    // table
    --table-fixed-column-left-box-shadow: 6px 0 6px 0 rgba(0, 0, 0, 0.05);
    --table-fixed-column-right-box-shadow: -6px 0 6px 0 rgba(0, 0, 0, 0.05);

    // segment
    --segment-active-bg-color: #fff;

    // tooltip
    --tooltip-bg-color: #000000bf;

    // calendar
    --calendar-active-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);

    // checkbox
    --checkbox-disabled-bg-color: rgba(0, 0, 0, 0.03);

    // avatar
    --avatar-disabled-color: #f5f5f5;

    // float btn
    --float-btn-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    --float-btn-hover-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
