@import 'base/base.css';
@import 'base/theme-neutral.css';
@import 'base/theme-status.css';
@import 'theme-system/theme-blue.css';
@import 'theme-system/theme-green.css';
@import 'theme-system/theme-yellow.css';
@import 'theme-system/theme-purple.css';
@import 'theme-system/theme-blue-green.css';
@import 'theme-system/theme-blue-red.css';
@import 'theme-system/theme-red-8.css';

:root {
  /* Theme Colors */
  /* Primary Theme Colors / 主题色 */
  --x-theme-color: var(--base-theme-color);
  --x-theme-color-hover: var(--base-theme-color-hover);
  --x-theme-color-active: var(--base-theme-color-active);
  --x-theme-color-disabled: var(--base-theme-color-disabled);
  --x-theme-color-bg: var(--base-theme-color-bg);

  /* Secondary Theme Colors / 次主题色 */
  --x-theme-color-secondary: var(--base-theme-color-secondary);
  --x-theme-color-secondary-hover: var(--base-theme-color-secondary-hover);
  --x-theme-color-secondary-active: var(--base-theme-color-secondary-active);
  --x-theme-color-secondary-disabled: var(--base-theme-color-secondary-disabled);
  --x-theme-color-secondary-bg: var(--base-theme-color-secondary-bg);

  /* Tertiary Theme Colors / 第三主题色 */
  --x-theme-color-tertiary: var(--base-theme-color-tertiary);
  --x-theme-color-tertiary-hover: var(--base-theme-color-tertiary-hover);
  --x-theme-color-tertiary-active: var(--base-theme-color-tertiary-active);
  --x-theme-color-tertiary-disabled: var(--base-theme-color-tertiary-disabled);
  --x-theme-color-tertiary-bg: var(--base-theme-color-tertiary-bg);

  --x-success-color: var(--base-success-color);
  --x-warning-color: var(--base-warning-color);
  --x-error-color: var(--base-error-color);
  --x-info-color: var(--base-info-color);

  /* Text Colors */
  --x-text-primary: var(--base-theme-color);
  --x-text-main: var(--base-neutral-text);
  --x-text-secondary: var(--base-neutral-text-secondary);
  --x-text-tertiary: var(--base-neutral-text-tertiary);
  --x-text-quaternary: var(--base-neutral-text-quaternary);
  --x-text-quinary: var(--base-neutral-text-quinary);
  --x-text-hover: var(--base-theme-color-hover);
  --x-text-active: var(--base-theme-color-active);
  
  /* Background Colors */
  --x-bg-primary: var(--base-theme-color);
  --x-bg-main: var(--base-neutral-bg);
  --x-bg-secondary: var(--base-neutral-bg-secondary);
  --x-bg-tertiary: var(--base-neutral-bg-tertiary);
  --x-bg-quaternary: var(--base-neutral-bg-quaternary);
  --x-bg-quinary: var(--base-neutral-bg-quinary);
  --x-bg-hover: var(--base-theme-color-hover);
  --x-bg-active: var(--base-theme-color-active);
  
  /* Border Colors */
  --x-border-primary: var(--base-theme-color);
  --x-border-main: var(--base-neutral-border);
  --x-border-secondary: var(--base-neutral-border-secondary);
  --x-border-tertiary: var(--base-neutral-border-tertiary);
  --x-border-quaternary: var(--base-neutral-border-quaternary);
  --x-border-quinary: var(--base-neutral-border-quinary);
  --x-border-hover: var(--base-theme-color-hover);
  --x-border-active: var(--base-theme-color-active);
  
  /* Outline Colors */
  --x-outline-primary: var(--base-theme-color);
  --x-outline-main: var(--base-neutral-outline);
  --x-outline-secondary: var(--base-neutral-outline-secondary);
  --x-outline-tertiary: var(--base-neutral-outline-tertiary);
  --x-outline-quaternary: var(--base-neutral-outline-quaternary);
  --x-outline-quinary: var(--base-neutral-outline-quinary);
  --x-outline-hover: var(--base-theme-color-hover);
  --x-outline-active: var(--base-theme-color-active);
  
  /* Divide Colors */
  --x-divide-primary: var(--base-theme-color);
  --x-divide-main: var(--base-neutral-divide);
  --x-divide-secondary: var(--base-neutral-divide-secondary);
  --x-divide-tertiary: var(--base-neutral-divide-tertiary);
  --x-divide-quaternary: var(--base-neutral-divide-quaternary);
  --x-divide-quinary: var(--base-neutral-divide-quinary);
  --x-divide-hover: var(--base-theme-color-hover);
  --x-divide-active: var(--base-theme-color-active);
}