src/styles/themes/base.css
/* 基础主题配置 - 定义通用的变量和结构 */

@layer theme {
  /* 默认主题变量 - 在各个主题CSS中会被覆盖 */
  :root {
    /* 主要背景色 */
    --color-bg-primary: oklch(97.9% 0.005 256.8);
    --color-bg-secondary: oklch(100% 0 0);
    --color-bg-tertiary: oklch(96.9% 0.013 244.4);
    
    /* 文本颜色 */
    --color-text-primary: oklch(23.8% 0.044 255.2);
    --color-text-secondary: oklch(50.6% 0.023 255.5);
    
    /* 边框和分隔线 */
    --color-border: oklch(91.3% 0.023 244.9);
    
    /* 强调色和交互元素 */
    --color-accent: var(--color-primary-600);
    --color-accent-hover: var(--color-primary-700);
    
    /* 阴影 */
    --color-shadow: color-mix(in oklab, black 10%, transparent);
    
    /* 滚动条 */
    --color-scrollbar-thumb: color-mix(in oklab, black 20%, transparent);
    --color-scrollbar-track: color-mix(in oklab, black 5%, transparent);
    
    /* 卡片和面板 */
    --color-card-bg: white;
    --color-card-border: var(--color-border);
    
    /* 输入框 */
    --color-input-bg: white;
    --color-input-border: var(--color-gray-300);
    --color-input-text: var(--color-text-primary);
    --color-input-placeholder: var(--color-gray-400);
    
    /* 按钮 - 默认 */
    --color-button-bg: var(--color-gray-100);
    --color-button-text: var(--color-gray-900);
    --color-button-border: var(--color-gray-300);
    --color-button-hover-bg: var(--color-gray-200);
    
    /* 按钮 - 主要 */
    --color-button-primary-bg: var(--color-primary-600);
    --color-button-primary-text: white;
    --color-button-primary-hover-bg: var(--color-primary-700);
    
    /* 按钮 - 次要 */
    --color-button-secondary-bg: var(--color-secondary-600);
    --color-button-secondary-text: white;
    --color-button-secondary-hover-bg: var(--color-secondary-700);
    
    /* 主题过渡 */
    --theme-transition-duration: 0.3s;
    --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 标题特定样式 - 默认 */
    --title-glow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --title-gradient: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-500), var(--color-secondary-600));
    --title-decoration-gradient: linear-gradient(90deg, var(--color-primary-600), var(--color-secondary-600));
  }
}

/* 全局主题过渡 */
html {
  transition: background-color var(--theme-transition-duration) var(--theme-transition-timing);
}

body,
.theme-transition-element {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: var(--theme-transition-timing);
}

/* 全局动画定义 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

@keyframes scanner-line {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes cyberpunk-glow {
  0% { text-shadow: 0 0 5px var(--color-neon-purple, rgba(236, 64, 255, 0.8)), 0 0 10px var(--color-accent, rgba(236, 64, 255, 0.6)); }
  50% { text-shadow: 0 0 10px var(--color-neon-cyan, rgba(64, 224, 255, 0.9)), 0 0 20px var(--color-neon-cyan, rgba(64, 224, 255, 0.7)), 0 0 30px var(--color-neon-purple, rgba(236, 64, 255, 0.5)); }
  100% { text-shadow: 0 0 5px var(--color-neon-purple, rgba(236, 64, 255, 0.8)), 0 0 10px var(--color-accent, rgba(236, 64, 255, 0.6)); }
}

@keyframes eco-flow {
  0% { opacity: 0.6; transform: scaleX(0.95); }
  50% { opacity: 1; transform: scaleX(1.05); }
  100% { opacity: 0.6; transform: scaleX(0.95); }
}

/* 基础主题工具类 */
@layer utilities {
  /* 背景色相关工具类 */
  .bg-primary {
    background-color: var(--color-bg-primary);
  }
  
  .bg-secondary {
    background-color: var(--color-bg-secondary);
  }
  
  .bg-tertiary {
    background-color: var(--color-bg-tertiary);
  }
  
  /* 文本颜色相关工具类 */
  .text-primary {
    color: var(--color-text-primary);
  }
  
  .text-secondary {
    color: var(--color-text-secondary);
  }
  
  /* 边框相关工具类 */
  .border-theme {
    border-color: var(--color-border);
  }
  
  /* 卡片和面板相关工具类 */
  .bg-card {
    background-color: var(--color-card-bg);
  }
  
  /* 按钮相关工具类 */
  .bg-button {
    background-color: var(--color-button-bg);
  }
  
  .bg-button-primary {
    background-color: var(--color-button-primary-bg);
  }
  
  .bg-button-secondary {
    background-color: var(--color-button-secondary-bg);
  }
  
  .text-button {
    color: var(--color-button-text);
  }
  
  .text-button-primary {
    color: var(--color-button-primary-text);
  }
  
  .text-button-secondary {
    color: var(--color-button-secondary-text);
  }
  
  /* 新增的通用工具类 - 文本颜色 */
  .text-heading {
    color: var(--color-text-primary);
  }
  
  .text-subheading {
    color: var(--color-text-secondary);
  }
  
  .text-body {
    color: var(--color-text-primary);
  }
  
  .text-muted {
    color: var(--color-text-secondary);
  }
  
  .text-placeholder {
    color: var(--color-input-placeholder);
  }
  
  /* 新增的通用工具类 - 背景色 */
  .bg-surface {
    background-color: var(--color-bg-primary);
  }
  
  .bg-elevated {
    background-color: var(--color-bg-secondary);
  }
  
  .bg-card-alt {
    background-color: var(--color-bg-tertiary);
  }
  
  /* 新增的通用工具类 - 边框和分隔线 */
  .border-subtle {
    border-color: var(--color-border);
  }
  
  .border-input {
    border-color: var(--color-input-border);
  }
  
  .border-accent {
    border-color: var(--color-accent);
  }
  
  /* 新增的通用工具类 - 输入框 */
  .bg-input {
    background-color: var(--color-input-bg);
  }
  
  .text-input {
    color: var(--color-input-text);
  }
  
  /* 新增的通用工具类 - 阴影 */
  .shadow-theme {
    box-shadow: 0 2px 8px var(--color-shadow);
  }
  
  .shadow-theme-lg {
    box-shadow: 0 4px 16px var(--color-shadow);
  }
  
  /* 新增的通用工具类 - 状态 */
  .hover-bg-accent:hover {
    background-color: var(--color-accent-hover);
  }
  
  .focus-border-accent:focus {
    border-color: var(--color-accent);
  }
  
  /* 玻璃态效果工具类 */
  .glass-morphism {
    background-color: color-mix(in oklab, var(--color-bg-secondary) 70%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid color-mix(in oklab, var(--color-border) 70%, transparent);
  }
}