// # 颜色
// ## 灰度值
$sar-white: #fff !default;
$sar-gray-100: #f5f5f5 !default;
$sar-gray-200: #ededed !default;
$sar-gray-300: #e3e3e3 !default;
$sar-gray-400: #d4d4d4 !default;
$sar-gray-500: #b5b5b5 !default;
$sar-gray-600: #757575 !default;
$sar-gray-700: #4f4f4f !default;
$sar-gray-800: #3b3b3b !default;
$sar-gray-900: #262626 !default;
$sar-black: #000 !default;

$sar-grays: (
  'gray-100': $sar-gray-100,
  'gray-200': $sar-gray-200,
  'gray-300': $sar-gray-300,
  'gray-400': $sar-gray-400,
  'gray-500': $sar-gray-500,
  'gray-600': $sar-gray-600,
  'gray-700': $sar-gray-700,
  'gray-800': $sar-gray-800,
  'gray-900': $sar-gray-900,
) !default;

// ## 基本色
$sar-blue: #0d6efd !default;
$sar-indigo: #6610f2 !default;
$sar-purple: #6f42c1 !default;
$sar-pink: #d63384 !default;
$sar-red: #dc3545 !default;
$sar-orange: #fd7e14 !default;
$sar-yellow: #ffc107 !default;
$sar-green: #198754 !default;
$sar-teal: #20c997 !default;
$sar-cyan: #0dcaf0 !default;

$sar-colors: (
  'blue': $sar-blue,
  'indigo': $sar-indigo,
  'purple': $sar-purple,
  'pink': $sar-pink,
  'red': $sar-red,
  'orange': $sar-orange,
  'yellow': $sar-yellow,
  'green': $sar-green,
  'teal': $sar-teal,
  'cyan': $sar-cyan,
  'black': $sar-black,
  'white': $sar-white,
) !default;

$sar-blue-100: mix(white, $sar-blue, 80%) !default;
$sar-blue-200: mix(white, $sar-blue, 60%) !default;
$sar-blue-300: mix(white, $sar-blue, 40%) !default;
$sar-blue-400: mix(white, $sar-blue, 20%) !default;
$sar-blue-500: $sar-blue !default;
$sar-blue-600: mix(black, $sar-blue, 20%) !default;
$sar-blue-700: mix(black, $sar-blue, 40%) !default;
$sar-blue-800: mix(black, $sar-blue, 60%) !default;
$sar-blue-900: mix(black, $sar-blue, 80%) !default;

$sar-blues: (
  'blue-100': $sar-blue-100,
  'blue-200': $sar-blue-200,
  'blue-300': $sar-blue-300,
  'blue-400': $sar-blue-400,
  'blue-500': $sar-blue-500,
  'blue-600': $sar-blue-600,
  'blue-700': $sar-blue-700,
  'blue-800': $sar-blue-800,
  'blue-900': $sar-blue-900,
) !default;

$sar-indigo-100: mix(white, $sar-indigo, 80%) !default;
$sar-indigo-200: mix(white, $sar-indigo, 60%) !default;
$sar-indigo-300: mix(white, $sar-indigo, 40%) !default;
$sar-indigo-400: mix(white, $sar-indigo, 20%) !default;
$sar-indigo-500: $sar-indigo !default;
$sar-indigo-600: mix(black, $sar-indigo, 20%) !default;
$sar-indigo-700: mix(black, $sar-indigo, 40%) !default;
$sar-indigo-800: mix(black, $sar-indigo, 60%) !default;
$sar-indigo-900: mix(black, $sar-indigo, 80%) !default;

$sar-indigos: (
  'indigo-100': $sar-indigo-100,
  'indigo-200': $sar-indigo-200,
  'indigo-300': $sar-indigo-300,
  'indigo-400': $sar-indigo-400,
  'indigo-500': $sar-indigo-500,
  'indigo-600': $sar-indigo-600,
  'indigo-700': $sar-indigo-700,
  'indigo-800': $sar-indigo-800,
  'indigo-900': $sar-indigo-900,
) !default;

$sar-purple-100: mix(white, $sar-purple, 80%) !default;
$sar-purple-200: mix(white, $sar-purple, 60%) !default;
$sar-purple-300: mix(white, $sar-purple, 40%) !default;
$sar-purple-400: mix(white, $sar-purple, 20%) !default;
$sar-purple-500: $sar-purple !default;
$sar-purple-600: mix(black, $sar-purple, 20%) !default;
$sar-purple-700: mix(black, $sar-purple, 40%) !default;
$sar-purple-800: mix(black, $sar-purple, 60%) !default;
$sar-purple-900: mix(black, $sar-purple, 80%) !default;

$sar-purples: (
  'purple-100': $sar-purple-100,
  'purple-200': $sar-purple-200,
  'purple-300': $sar-purple-300,
  'purple-400': $sar-purple-400,
  'purple-500': $sar-purple-500,
  'purple-600': $sar-purple-600,
  'purple-700': $sar-purple-700,
  'purple-800': $sar-purple-800,
  'purple-900': $sar-purple-900,
) !default;

$sar-pink-100: mix(white, $sar-pink, 80%) !default;
$sar-pink-200: mix(white, $sar-pink, 60%) !default;
$sar-pink-300: mix(white, $sar-pink, 40%) !default;
$sar-pink-400: mix(white, $sar-pink, 20%) !default;
$sar-pink-500: $sar-pink !default;
$sar-pink-600: mix(black, $sar-pink, 20%) !default;
$sar-pink-700: mix(black, $sar-pink, 40%) !default;
$sar-pink-800: mix(black, $sar-pink, 60%) !default;
$sar-pink-900: mix(black, $sar-pink, 80%) !default;

$sar-pinks: (
  'pink-100': $sar-pink-100,
  'pink-200': $sar-pink-200,
  'pink-300': $sar-pink-300,
  'pink-400': $sar-pink-400,
  'pink-500': $sar-pink-500,
  'pink-600': $sar-pink-600,
  'pink-700': $sar-pink-700,
  'pink-800': $sar-pink-800,
  'pink-900': $sar-pink-900,
) !default;

$sar-red-100: mix(white, $sar-red, 80%) !default;
$sar-red-200: mix(white, $sar-red, 60%) !default;
$sar-red-300: mix(white, $sar-red, 40%) !default;
$sar-red-400: mix(white, $sar-red, 20%) !default;
$sar-red-500: $sar-red !default;
$sar-red-600: mix(black, $sar-red, 20%) !default;
$sar-red-700: mix(black, $sar-red, 40%) !default;
$sar-red-800: mix(black, $sar-red, 60%) !default;
$sar-red-900: mix(black, $sar-red, 80%) !default;

$sar-reds: (
  'red-100': $sar-red-100,
  'red-200': $sar-red-200,
  'red-300': $sar-red-300,
  'red-400': $sar-red-400,
  'red-500': $sar-red-500,
  'red-600': $sar-red-600,
  'red-700': $sar-red-700,
  'red-800': $sar-red-800,
  'red-900': $sar-red-900,
) !default;

$sar-orange-100: mix(white, $sar-orange, 80%) !default;
$sar-orange-200: mix(white, $sar-orange, 60%) !default;
$sar-orange-300: mix(white, $sar-orange, 40%) !default;
$sar-orange-400: mix(white, $sar-orange, 20%) !default;
$sar-orange-500: $sar-orange !default;
$sar-orange-600: mix(black, $sar-orange, 20%) !default;
$sar-orange-700: mix(black, $sar-orange, 40%) !default;
$sar-orange-800: mix(black, $sar-orange, 60%) !default;
$sar-orange-900: mix(black, $sar-orange, 80%) !default;

$sar-oranges: (
  'orange-100': $sar-orange-100,
  'orange-200': $sar-orange-200,
  'orange-300': $sar-orange-300,
  'orange-400': $sar-orange-400,
  'orange-500': $sar-orange-500,
  'orange-600': $sar-orange-600,
  'orange-700': $sar-orange-700,
  'orange-800': $sar-orange-800,
  'orange-900': $sar-orange-900,
) !default;

$sar-yellow-100: mix(white, $sar-yellow, 80%) !default;
$sar-yellow-200: mix(white, $sar-yellow, 60%) !default;
$sar-yellow-300: mix(white, $sar-yellow, 40%) !default;
$sar-yellow-400: mix(white, $sar-yellow, 20%) !default;
$sar-yellow-500: $sar-yellow !default;
$sar-yellow-600: mix(black, $sar-yellow, 20%) !default;
$sar-yellow-700: mix(black, $sar-yellow, 40%) !default;
$sar-yellow-800: mix(black, $sar-yellow, 60%) !default;
$sar-yellow-900: mix(black, $sar-yellow, 80%) !default;

$sar-yellows: (
  'yellow-100': $sar-yellow-100,
  'yellow-200': $sar-yellow-200,
  'yellow-300': $sar-yellow-300,
  'yellow-400': $sar-yellow-400,
  'yellow-500': $sar-yellow-500,
  'yellow-600': $sar-yellow-600,
  'yellow-700': $sar-yellow-700,
  'yellow-800': $sar-yellow-800,
  'yellow-900': $sar-yellow-900,
) !default;

$sar-green-100: mix(white, $sar-green, 80%) !default;
$sar-green-200: mix(white, $sar-green, 60%) !default;
$sar-green-300: mix(white, $sar-green, 40%) !default;
$sar-green-400: mix(white, $sar-green, 20%) !default;
$sar-green-500: $sar-green !default;
$sar-green-600: mix(black, $sar-green, 20%) !default;
$sar-green-700: mix(black, $sar-green, 40%) !default;
$sar-green-800: mix(black, $sar-green, 60%) !default;
$sar-green-900: mix(black, $sar-green, 80%) !default;

$sar-greens: (
  'green-100': $sar-green-100,
  'green-200': $sar-green-200,
  'green-300': $sar-green-300,
  'green-400': $sar-green-400,
  'green-500': $sar-green-500,
  'green-600': $sar-green-600,
  'green-700': $sar-green-700,
  'green-800': $sar-green-800,
  'green-900': $sar-green-900,
) !default;

$sar-teal-100: mix(white, $sar-teal, 80%) !default;
$sar-teal-200: mix(white, $sar-teal, 60%) !default;
$sar-teal-300: mix(white, $sar-teal, 40%) !default;
$sar-teal-400: mix(white, $sar-teal, 20%) !default;
$sar-teal-500: $sar-teal !default;
$sar-teal-600: mix(black, $sar-teal, 20%) !default;
$sar-teal-700: mix(black, $sar-teal, 40%) !default;
$sar-teal-800: mix(black, $sar-teal, 60%) !default;
$sar-teal-900: mix(black, $sar-teal, 80%) !default;

$sar-teals: (
  'teal-100': $sar-teal-100,
  'teal-200': $sar-teal-200,
  'teal-300': $sar-teal-300,
  'teal-400': $sar-teal-400,
  'teal-500': $sar-teal-500,
  'teal-600': $sar-teal-600,
  'teal-700': $sar-teal-700,
  'teal-800': $sar-teal-800,
  'teal-900': $sar-teal-900,
) !default;

$sar-cyan-100: mix(white, $sar-cyan, 80%) !default;
$sar-cyan-200: mix(white, $sar-cyan, 60%) !default;
$sar-cyan-300: mix(white, $sar-cyan, 40%) !default;
$sar-cyan-400: mix(white, $sar-cyan, 20%) !default;
$sar-cyan-500: $sar-cyan !default;
$sar-cyan-600: mix(black, $sar-cyan, 20%) !default;
$sar-cyan-700: mix(black, $sar-cyan, 40%) !default;
$sar-cyan-800: mix(black, $sar-cyan, 60%) !default;
$sar-cyan-900: mix(black, $sar-cyan, 80%) !default;

$sar-cyans: (
  'cyan-100': $sar-cyan-100,
  'cyan-200': $sar-cyan-200,
  'cyan-300': $sar-cyan-300,
  'cyan-400': $sar-cyan-400,
  'cyan-500': $sar-cyan-500,
  'cyan-600': $sar-cyan-600,
  'cyan-700': $sar-cyan-700,
  'cyan-800': $sar-cyan-800,
  'cyan-900': $sar-cyan-900,
) !default;

// ## 主题色
$sar-primary: $sar-blue !default;
$sar-secondary: $sar-gray-600 !default;
$sar-success: $sar-green !default;
$sar-info: $sar-cyan !default;
$sar-warning: $sar-yellow !default;
$sar-danger: $sar-red !default;

$sar-theme-colors: (
  primary: (
    $sar-blue,
    $sar-blue-200,
    $sar-blue,
  ),
  secondary: (
    $sar-gray-600,
    $sar-gray-200,
    $sar-gray-800,
  ),
  success: (
    $sar-green,
    $sar-green-200,
    $sar-green,
  ),
  info: (
    $sar-cyan,
    $sar-cyan-200,
    $sar-cyan,
  ),
  warning: (
    $sar-yellow,
    $sar-yellow-200,
    $sar-yellow,
  ),
  danger: (
    $sar-red,
    $sar-red-200,
    $sar-red,
  ),
) !default;

// ## 灰度场景色 - light
$sar-body-color: $sar-gray-900 !default;
$sar-body-bg-color: $sar-gray-100 !default;
$sar-secondary-color: $sar-gray-700 !default;
$sar-secondary-bg-color: $sar-gray-200 !default;
$sar-tertiary-color: $sar-gray-600 !default;
$sar-tertiary-bg-color: $sar-gray-300 !default;
$sar-quaternary-color: $sar-gray-500 !default;
$sar-quaternary-bg-color: $sar-gray-100 !default;
$sar-emphasis-color: $sar-black !default;
$sar-emphasis-bg-color: $sar-white !default;
$sar-deemphasis-color: $sar-gray-500 !default;
$sar-deemphasis-bg-color: $sar-gray-500 !default;
$sar-border-color: $sar-gray-400 !default;
$sar-dark-border-color: $sar-gray-600 !default;
$sar-active-bg-color: $sar-gray-200 !default;
$sar-active-deep-bg-color: $sar-gray-300 !default;
// ### 禁用状态
$sar-disabled-opacity: 0.6 !default;
$sar-disabled-color: $sar-gray-500 !default;
$sar-disabled-deep-bg-color: $sar-gray-500 !default;
$sar-disabled-bg-color: $sar-gray-400 !default;
$sar-disabled-shallow-bg-color: $sar-gray-200 !default;

// ## 灰度场景色 - dark
$sar-dark-body-color: $sar-gray-200 !default;
$sar-dark-body-bg-color: $sar-gray-900 !default;
$sar-dark-secondary-color: $sar-gray-400 !default;
$sar-dark-secondary-bg-color: $sar-gray-700 !default;
$sar-dark-tertiary-color: $sar-gray-500 !default;
$sar-dark-tertiary-bg-color: $sar-gray-600 !default;
$sar-dark-quaternary-color: $sar-gray-500 !default;
$sar-dark-quaternary-bg-color: $sar-gray-700 !default;
$sar-dark-emphasis-color: $sar-white !default;
$sar-dark-emphasis-bg-color: $sar-gray-800 !default;
$sar-dark-deemphasis-color: $sar-gray-600 !default;
$sar-dark-deemphasis-bg-color: $sar-gray-300 !default;
$sar-dark-border-color: $sar-gray-700 !default;
$sar-dark-active-bg-color: $sar-gray-700 !default;
$sar-dark-active-deep-bg-color: $sar-gray-600 !default;
// ### 禁用状态
$sar-dark-disabled-opacity: 0.6 !default;
$sar-dark-disabled-color: $sar-gray-600 !default;
$sar-dark-disabled-deep-bg-color: $sar-gray-500 !default;
$sar-dark-disabled-bg-color: $sar-gray-400 !default;
$sar-dark-disabled-shallow-bg-color: $sar-gray-700 !default;

// # 圆角
$sar-rounded-xs: 2px !default;
$sar-rounded-sm: 4px !default;
$sar-rounded: 6px !default;
$sar-rounded-lg: 8px !default;
$sar-rounded-xl: 12px !default;
$sar-rounded-2xl: 16px !default;
$sar-rounded-3xl: 24px !default;
$sar-rounded-full: 9999px !default;

// # 字号
$sar-text-xs: 10px !default;
$sar-text-sm: 12px !default;
$sar-text-base: 14px !default;
$sar-text-lg: 16px !default;
$sar-text-xl: 18px !default;
$sar-text-2xl: 24px !default;
$sar-text-3xl: 32px !default;

// # 字重
$sar-font-bold: 700 !default;
$sar-font-normal: 400 !default;

// # 行高
$sar-leading-none: 1 !default;
$sar-leading-tight: 1.25 !default;
$sar-leading-snug: 1.375 !default;
$sar-leading-normal: 1.5 !default;
$sar-leading-relaxed: 1.625 !default;
$sar-leading-loose: 2 !default;

// # 阴影
$sar-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5) !default;
$sar-shadow: 0 4px 6px rgb(0 0 0 / 0.1) !default;
$sar-shadow-lg: 0 2px 15px rgb(0 0 0 / 0.1) !default;

// # 遮罩
$sar-mask-legible: rgba(0, 0, 0, 0.1) !default;
$sar-mask: rgba(0, 0, 0, 0.5) !default;
$sar-mask-illegible: rgba(0, 0, 0, 0.7) !default;

// # 按下状态
$sar-active-opacity: 0.5 !default;

// # 加载状态
$sar-loading-pointer-events: none !default;
$sar-loading-opacity: 0.6 !default;

// # 过渡时间
$sar-duration-slow: 500ms !default;
$sar-duration: 300ms !default;
$sar-duration-fast: 150ms !default;

// # bem
$sar-namespace: 'sar' !default;
$sar-block-separator: '-' !default;
$sar-element-separator: '__' !default;
$sar-modifier-separator: '_' !default;

// # 暗黑模式开关
$sar-darkmode: false !default;