@import "tailwindcss";
@import "./content-styles.css";

/* 定义深色模式选择器 */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
  /* 主色调 - 使用琥珀色系为主题色 */
  --color-primary-50: #fffbeb;
  --color-primary-100: #fef3c7;
  --color-primary-200: #fde68a;
  --color-primary-300: #fcd34d;
  --color-primary-400: #fbbf24;
  --color-primary-500: #f59e0b;
  --color-primary-600: #d97706;
  --color-primary-700: #b45309;
  --color-primary-800: #92400e;
  --color-primary-900: #78350f;
  --color-primary-950: #451a03;

  /* 辅助色调 - 暖棕色 */
  --color-secondary-50: #faf5f0;
  --color-secondary-100: #f8f0e5;
  --color-secondary-200: #f1e0cb;
  --color-secondary-300: #e6c9a5;
  --color-secondary-400: #d9ac7c;
  --color-secondary-500: #c6915a;
  --color-secondary-600: #b67d49;
  --color-secondary-700: #96663d;
  --color-secondary-800: #7d5636;
  --color-secondary-900: #67472e;
  --color-secondary-950: #3a2719;

  /* 强调色调 - 深红褐色 */
  --color-accent-50: #fdf2f2;
  --color-accent-100: #f8e1e1;
  --color-accent-200: #f3c7c7;
  --color-accent-300: #e89f9f;
  --color-accent-400: #dc7676;
  --color-accent-500: #c95252;
  --color-accent-600: #af3f3f;
  --color-accent-700: #923636;
  --color-accent-800: #783333;
  --color-accent-900: #653131;
  --color-accent-950: #3b1b1b;

  /* 中性色调 */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  /* 深色模式颜色 */
  --color-dark-bg: #1a1613;
  --color-dark-surface: #282420;
  --color-dark-card: #332f2b;
  --color-dark-border: #49443d;
  --color-dark-text: #f1ece4;
  --color-dark-text-secondary: #c4b9aa;

  /* 特殊主题背景 - 统一亮色和暗色变量 */
  --color-paper: #f8f5e8;
  --color-recipe: #fdf7ed;
  --color-scroll: #f5f1e6;
  --color-travel: #fef8e8;
  
  /* 黑暗模式中的特殊主题背景 */
  --color-dark-paper: #2d2822;
  --color-dark-recipe: #302a23;
  --color-dark-scroll: #2b2720;
  --color-dark-travel: #2e2921;

  /* 黑暗模式中的强调色 */
  --color-dark-primary-50: #362713;
  --color-dark-primary-100: #453319;
  --color-dark-primary-200: #604826;
  --color-dark-primary-300: #7c5d32;
  --color-dark-primary-400: #9b763d;
  --color-dark-primary-500: #bd914a;
  --color-dark-primary-600: #d7ab65;
  --color-dark-primary-700: #e9c689;
  --color-dark-primary-800: #f5e0b3;
  --color-dark-primary-900: #faefdb;
}

/* 当JS加载完成时，移除no-js类 */
html {
  &.no-js {
    opacity: 1;
  }
}

:root {
  /* 基础色调 */
  --bg-primary: var(--color-gray-50);
  --bg-secondary: var(--color-gray-100);
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --border-color: var(--color-gray-300);
  
  /* 主题色调 */
  --theme-primary: var(--color-primary-500);
  --theme-primary-light: var(--color-primary-400);
  --theme-primary-dark: var(--color-primary-600);
  --theme-primary-bg: var(--color-primary-50);
  --theme-primary-bg-hover: var(--color-primary-100);
  
  /* 页面特殊背景 - 使用统一的变量 */
  --bg-paper: var(--color-paper);
  --bg-recipe: var(--color-recipe);
  --bg-scroll: var(--color-scroll);
  --bg-travel: var(--color-travel);
  
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* 深色模式样式 */
[data-theme='dark'] {
  /* 基础色调 */
  --bg-primary: var(--color-dark-bg);
  --bg-secondary: var(--color-dark-surface);
  --text-primary: var(--color-dark-text);
  --text-secondary: var(--color-dark-text-secondary);
  --border-color: var(--color-dark-border);
  
  /* 主题色调 */
  --theme-primary: var(--color-dark-primary-500);
  --theme-primary-light: var(--color-dark-primary-400);
  --theme-primary-dark: var(--color-dark-primary-600);
  --theme-primary-bg: var(--color-dark-primary-100);
  --theme-primary-bg-hover: var(--color-dark-primary-200);
  
  /* 页面特殊背景 */
  --bg-paper: var(--color-dark-paper);
  --bg-recipe: var(--color-dark-recipe);
  --bg-scroll: var(--color-dark-scroll);
  --bg-travel: var(--color-dark-travel);

  /* 元素背景色覆盖 */
  .bg-white {
    background-color: var(--color-dark-card);
  }

  /* 文本颜色覆盖 */
  .text-gray-900 {
    color: var(--color-dark-text);
  }

  .text-gray-700, 
  .text-gray-600 {
    color: var(--color-dark-text-secondary);
  }

  /* 对卡片背景色的改进 */
  .ancient-card, 
  .spotlight-card,
  .bg-gray-900\/95,
  [class*="bg-gray-900"] {
    background-color: var(--color-dark-card);
  }

  /* 对话框和弹出层背景 */
  .bg-gray-800 {
    background-color: var(--color-dark-surface);
  }

  /* 琥珀色/棕色兼容性覆盖 */
  .text-amber-300,
  .text-amber-400,
  .text-brown-300 {
    color: var(--color-dark-primary-600);
  }

  .bg-amber-900,
  .bg-slate-900 {
    background-color: var(--color-dark-bg);
  }
  
  /* 处理颜色命名不一致的问题 */
  .text-color-primary-600, 
  .text-primary-600 {
    color: var(--color-dark-primary-600);
  }
  
  .text-color-primary-400, 
  .text-primary-400 {
    color: var(--color-dark-primary-400);
  }
  
  .bg-color-primary-600, 
  .bg-primary-600 {
    background-color: var(--color-dark-primary-600);
  }
  
  .bg-color-primary-400, 
  .bg-primary-400 {
    background-color: var(--color-dark-primary-400);
  }
  
  .border-color-primary-600, 
  .border-primary-600 {
    border-color: var(--color-dark-primary-600);
  }
  
  .border-color-primary-400, 
  .border-primary-400 {
    border-color: var(--color-dark-primary-400);
  }

  /* 表单元素适配 */
  input,
  select,
  textarea {
    background-color: var(--color-dark-card);
    border-color: var(--color-dark-border);
    color: var(--color-dark-text);
  }

  /* 链接颜色调整 */
  a:not([class]) {
    color: var(--theme-primary);
    
    &:hover {
      color: var(--theme-primary-light);
    }
  }

  /* 阴影调整 */
  .shadow-md,
  .shadow-lg {
    --tw-shadow-color: rgba(0, 0, 0, 0.4);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  /* 渐变背景调整 */
  .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--color-dark-primary-200), var(--color-dark-primary-300));
  }
}

/* 亮色模式特定覆盖 */
[data-theme='light'] {
  .text-amber-700,
  .text-amber-800,
  .text-brown-700 {
    color: var(--color-primary-700);
  }

  .bg-amber-50,
  .bg-amber-100 {
    background-color: var(--color-primary-50);
  }
  
  /* 处理颜色命名不一致的问题 */
  .text-color-primary-600, 
  .text-primary-600 {
    color: var(--color-primary-600);
  }
  
  .text-color-primary-400, 
  .text-primary-400 {
    color: var(--color-primary-400);
  }
  
  .bg-color-primary-600, 
  .bg-primary-600 {
    background-color: var(--color-primary-600);
  }
  
  .bg-color-primary-400, 
  .bg-primary-400 {
    background-color: var(--color-primary-400);
  }
  
  .border-color-primary-600, 
  .border-primary-600 {
    border-color: var(--color-primary-600);
  }
  
  .border-color-primary-400, 
  .border-primary-400 {
    border-color: var(--color-primary-400);
  }
}

/* 背景渐变动画 */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 统一颜色类 */
.bg-theme-primary { background-color: var(--theme-primary); }
.bg-theme-primary-light { background-color: var(--theme-primary-light); }
.bg-theme-primary-dark { background-color: var(--theme-primary-dark); }
.bg-theme-primary-bg { background-color: var(--theme-primary-bg); }

.text-theme-primary { color: var(--theme-primary); }
.text-theme-primary-light { color: var(--theme-primary-light); }
.text-theme-primary-dark { color: var(--theme-primary-dark); }

.border-theme-primary { border-color: var(--theme-primary); }
.border-theme-primary-light { border-color: var(--theme-primary-light); }
.border-theme-primary-dark { border-color: var(--theme-primary-dark); }

/* 添加color-primary和primary颜色类的统一映射 */
.text-primary-500, .text-color-primary-500 { color: var(--theme-primary); }
.text-primary-400, .text-color-primary-400 { color: var(--theme-primary-light); }
.text-primary-600, .text-color-primary-600 { color: var(--theme-primary-dark); }
.text-primary-300, .text-color-primary-300 { color: var(--color-primary-300); }
.text-primary-700, .text-color-primary-700 { color: var(--color-primary-700); }

.bg-primary-500, .bg-color-primary-500 { background-color: var(--theme-primary); }
.bg-primary-400, .bg-color-primary-400 { background-color: var(--theme-primary-light); }
.bg-primary-600, .bg-color-primary-600 { background-color: var(--theme-primary-dark); }
.bg-primary-50, .bg-color-primary-50 { background-color: var(--theme-primary-bg); }
.bg-primary-100, .bg-color-primary-100 { background-color: var(--theme-primary-bg-hover); }

.border-primary-500, .border-color-primary-500 { border-color: var(--theme-primary); }
.border-primary-400, .border-color-primary-400 { border-color: var(--theme-primary-light); }
.border-primary-600, .border-color-primary-600 { border-color: var(--theme-primary-dark); }
.border-primary-300, .border-color-primary-300 { border-color: var(--color-primary-300); }
.border-primary-700, .border-color-primary-700 { border-color: var(--color-primary-700); }

/* 主题特殊背景 - 使用统一命名并移除重复定义 */
.bg-scroll-bg { background-color: var(--bg-scroll); }
.bg-recipe-paper { background-color: var(--bg-recipe); }
.bg-ancient-paper { background-color: var(--bg-paper); }