/* vodcms 10套主题配色方案 */

/* 全局默认主题变量 */
:root {
  --c-primary: #0078EE;
  --c-secondary: #2C88FF;
  --c-accent: #00C6FF;
  --c-neutral: #374151;
  --c-base: #FFFFFF;
}

/* 默认主题：蓝白色 */
[data-theme="blue-white"] {
  --c-primary: #0078EE;
  --c-secondary: #2C88FF;
  --c-accent: #00C6FF;
  --c-neutral: #374151;
  --c-base: #FFFFFF;
}

/* 暗金色主题 */
[data-theme="dark-gold"] {
  --c-primary: #C09553;
  --c-secondary: #FFD28C;
  --c-accent: #FFB547;
  --c-neutral: #1F2937;
  --c-base: #111827;
}

/* 青黑色主题 */
[data-theme="cyan-black"] {
  --c-primary: #06B6D4;
  --c-secondary: #22D3EE;
  --c-accent: #67E8F9;
  --c-neutral: #1E293B;
  --c-base: #0F172A;
}

/* 紫银色主题 */
[data-theme="violet-silver"] {
  --c-primary: #7C3AED;
  --c-secondary: #A78BFA;
  --c-accent: #C4B5FD;
  --c-neutral: #374151;
  --c-base: #F9FAFB;
}

/* 翡翠奶油色主题 */
[data-theme="emerald-cream"] {
  --c-primary: #10B981;
  --c-secondary: #34D399;
  --c-accent: #6EE7B7;
  --c-neutral: #374151;
  --c-base: #F8FFF9;
}

/* 小清新主题 - 专为btxia设计 */
[data-theme="fresh-mint"] {
  /* 主色调 - 薄荷绿系列 */
  --c-primary: #10B981;
  --c-primary-50: #ecfdf5;
  --c-primary-100: #d1fae5;
  --c-primary-200: #a7f3d0;
  --c-primary-300: #6ee7b7;
  --c-primary-400: #34d399;
  --c-primary-500: #10b981;
  --c-primary-600: #059669;
  --c-primary-700: #047857;
  --c-primary-800: #065f46;
  --c-primary-900: #064e3b;
  
  /* 辅助色 - 温暖橙色 */
  --c-secondary: #f59e0b;
  --c-secondary-50: #fffbeb;
  --c-secondary-100: #fef3c7;
  --c-secondary-200: #fde68a;
  --c-secondary-300: #fcd34d;
  --c-secondary-400: #fbbf24;
  --c-secondary-500: #f59e0b;
  --c-secondary-600: #d97706;
  --c-secondary-700: #b45309;
  --c-secondary-800: #92400e;
  --c-secondary-900: #78350f;
  
  /* 点缀色 - 珊瑚粉 */
  --c-accent: #ec4899;
  --c-accent-50: #fdf2f8;
  --c-accent-100: #fce7f3;
  --c-accent-200: #fbcfe8;
  --c-accent-300: #f9a8d4;
  --c-accent-400: #f472b6;
  --c-accent-500: #ec4899;
  --c-accent-600: #db2777;
  --c-accent-700: #be185d;
  --c-accent-800: #9d174d;
  --c-accent-900: #831843;
  
  /* 中性色 */
  --c-neutral: #374151;
  --c-neutral-50: #fefefe;
  --c-neutral-100: #f7f8f7;
  --c-neutral-200: #e5e7eb;
  --c-neutral-300: #d1d5db;
  --c-neutral-400: #9ca3af;
  --c-neutral-500: #6b7280;
  --c-neutral-600: #4b5563;
  --c-neutral-700: #374151;
  --c-neutral-800: #1f2937;
  --c-neutral-900: #111827;
  
  /* 背景色 */
  --c-base: #fefefe;
  --c-surface: #f7f8f7;
  --c-surface-hover: #f0f9ff;
  
  /* 文字色 */
  --c-text-primary: #374151;
  --c-text-secondary: #6b7280;
  --c-text-muted: #9ca3af;
  --c-text-inverse: #ffffff;
  
  /* 边框色 */
  --c-border: #e5e7eb;
  --c-border-light: #f3f4f6;
  --c-border-focus: #a7f3d0;
  
  /* 阴影色 */
  --c-shadow: rgba(16, 185, 129, 0.1);
  --c-shadow-lg: rgba(16, 185, 129, 0.15);
}

/* 日落色主题 */
[data-theme="sunset"] {
  --c-primary: #F97316;
  --c-secondary: #FDBA74;
  --c-accent: #FECACA;
  --c-neutral: #374151;
  --c-base: #FFF8F3;
}

/* 玫瑰黑色主题 */
[data-theme="rose-black"] {
  --c-primary: #E11D48;
  --c-secondary: #F472B6;
  --c-accent: #FDA4AF;
  --c-neutral: #1F2937;
  --c-base: #0F172A;
}

/* 青灰色主题 */
[data-theme="teal-gray"] {
  --c-primary: #14B8A6;
  --c-secondary: #2DD4BF;
  --c-accent: #5EEAD4;
  --c-neutral: #4B5563;
  --c-base: #F0FDF4;
}

/* 靛蓝沙色主题 */
[data-theme="indigo-sand"] {
  --c-primary: #4F46E5;
  --c-secondary: #818CF8;
  --c-accent: #A5B4FC;
  --c-neutral: #374151;
  --c-base: #FFFDF7;
}

/* 石红色主题 */
[data-theme="stone-red"] {
  --c-primary: #DC2626;
  --c-secondary: #F87171;
  --c-accent: #FCA5A5;
  --c-neutral: #374151;
  --c-base: #FAF7F5;
}

/* 全局过渡动画 */
* {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--c-base);
}

::-webkit-scrollbar-thumb {
  background: var(--c-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-secondary);
}

/* 小清新主题的Tailwind类映射 */
[data-theme="fresh-mint"] {
  /* Tailwind primary色彩映射 */
  --tw-color-primary-50: var(--c-primary-50);
  --tw-color-primary-100: var(--c-primary-100);
  --tw-color-primary-200: var(--c-primary-200);
  --tw-color-primary-300: var(--c-primary-300);
  --tw-color-primary-400: var(--c-primary-400);
  --tw-color-primary-500: var(--c-primary-500);
  --tw-color-primary-600: var(--c-primary-600);
  --tw-color-primary-700: var(--c-primary-700);
  --tw-color-primary-800: var(--c-primary-800);
  --tw-color-primary-900: var(--c-primary-900);
  
  /* Tailwind secondary色彩映射 */
  --tw-color-secondary-50: var(--c-secondary-50);
  --tw-color-secondary-100: var(--c-secondary-100);
  --tw-color-secondary-200: var(--c-secondary-200);
  --tw-color-secondary-300: var(--c-secondary-300);
  --tw-color-secondary-400: var(--c-secondary-400);
  --tw-color-secondary-500: var(--c-secondary-500);
  --tw-color-secondary-600: var(--c-secondary-600);
  --tw-color-secondary-700: var(--c-secondary-700);
  --tw-color-secondary-800: var(--c-secondary-800);
  --tw-color-secondary-900: var(--c-secondary-900);
  
  /* Tailwind accent色彩映射 */
  --tw-color-accent-50: var(--c-accent-50);
  --tw-color-accent-100: var(--c-accent-100);
  --tw-color-accent-200: var(--c-accent-200);
  --tw-color-accent-300: var(--c-accent-300);
  --tw-color-accent-400: var(--c-accent-400);
  --tw-color-accent-500: var(--c-accent-500);
  --tw-color-accent-600: var(--c-accent-600);
  --tw-color-accent-700: var(--c-accent-700);
  --tw-color-accent-800: var(--c-accent-800);
  --tw-color-accent-900: var(--c-accent-900);
}

/* 小清新主题的组件样式增强 */
[data-theme="fresh-mint"] {
  /* 卡片样式 */
  .card-fresh {
    background: var(--c-base);
    border: 1px solid var(--c-border-light);
    border-radius: 1rem;
    box-shadow: 0 1px 3px var(--c-shadow);
    transition: all 0.3s ease;
  }
  
  .card-fresh:hover {
    box-shadow: 0 10px 25px var(--c-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--c-border-focus);
  }
  
  /* 按钮样式 */
  .btn-fresh-primary {
    background: linear-gradient(135deg, var(--c-primary-500), var(--c-primary-600));
    color: var(--c-text-inverse);
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  
  .btn-fresh-primary:hover {
    background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-700));
    transform: scale(0.98);
  }
  
  .btn-fresh-secondary {
    background: var(--c-secondary-100);
    color: var(--c-secondary-700);
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  
  .btn-fresh-secondary:hover {
    background: var(--c-secondary-200);
    color: var(--c-secondary-800);
  }
  
  /* 输入框样式 */
  .input-fresh {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    color: var(--c-text-primary);
    transition: all 0.2s ease;
  }
  
  .input-fresh:focus {
    background: var(--c-base);
    border-color: var(--c-primary-300);
    box-shadow: 0 0 0 3px var(--c-primary-100);
    outline: none;
  }
  
  /* 导航样式 */
  .nav-fresh {
    background: linear-gradient(180deg, var(--c-base), var(--c-surface));
    border-right: 1px solid var(--c-border-light);
    box-shadow: 2px 0 10px var(--c-shadow);
  }
  
  .nav-item-fresh {
    color: var(--c-text-secondary);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin: 0.25rem 0.5rem;
    transition: all 0.2s ease;
  }
  
  .nav-item-fresh:hover {
    background: var(--c-primary-50);
    color: var(--c-primary-700);
  }
  
  .nav-item-fresh.active {
    background: var(--c-primary-100);
    color: var(--c-primary-800);
    font-weight: 600;
  }
}

/* 基础字体大小 */
html {
  font-size: 12px;
}

/* 响应式字体大小 */
@media (min-width: 640px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}