/* 主题颜色变量 */

/* 设置RGB变量，方便透明度控制 */
:root {
  --primary-rgb: 0, 112, 210; /* 默认蓝色RGB值 */
}

/* 默认主题: 激励红 (Motivating Red) */
.theme-amber {
  --primary-color: #e53935;
  --primary-dark: #c62828;
  --primary-light: #ff5252;
  --primary-rgb: 229, 57, 53;

  /* 辅助色调整 */
  --accent-color: #ffcdd2;
  --accent-dark: #ffb3b3;
  --accent-light: #ffe6e6;
}

/* 动感橙 (Action Orange) */
.theme-wine {
  --primary-color: #ff6600;
  --primary-dark: #e65c00;
  --primary-light: #ff8533;
  --primary-rgb: 255, 102, 0;

  /* 辅助色调整 */
  --accent-color: #ffe0cc;
  --accent-dark: #ffd1b3;
  --accent-light: #fff0e6;
}

/* 购物红 (Shopping Red) */
.theme-golden {
  --primary-color: #d32f2f;
  --primary-dark: #b71c1c;
  --primary-light: #ef5350;
  --primary-rgb: 211, 47, 47;

  /* 辅助色调整 */
  --accent-color: #ffcdd2;
  --accent-dark: #ef9a9a;
  --accent-light: #ffebee;
}

/* 淘宝橙 (Taobao Orange) */
.theme-coral {
  --primary-color: #ff5000;
  --primary-dark: #e04600;
  --primary-light: #ff7432;
  --primary-rgb: 255, 80, 0;

  /* 辅助色调整 */
  --accent-color: #ffdfcc;
  --accent-dark: #ffcbad;
  --accent-light: #ffefe7;
}

/* 专业蓝 (Professional Blue) - 替换促销珊瑚 */
.theme-sienna {
  --primary-color: #2196f3;
  --primary-dark: #1976d2;
  --primary-light: #64b5f6;
  --primary-rgb: 33, 150, 243;

  /* 辅助色调整 */
  --accent-color: #bbdefb;
  --accent-dark: #90caf9;
  --accent-light: #e3f2fd;
}

/* 经典绿 (Classic Green) - 替换珊瑚金 */
.theme-dark {
  --primary-color: #4caf50;
  --primary-dark: #388e3c;
  --primary-light: #81c784;
  --primary-rgb: 76, 175, 80;

  /* 辅助色调整 */
  --accent-color: #c8e6c9;
  --accent-dark: #a5d6a7;
  --accent-light: #e8f5e9;
}

/* 温暖砖橙 (Warm Brick Orange) */
.theme-green {
  --primary-color: #e67e22;
  --primary-dark: #d35400;
  --primary-light: #f39c12;
  --primary-rgb: 230, 126, 34;

  /* 辅助色调整 */
  --accent-color: #fdebd0;
  --accent-dark: #fad7a0;
  --accent-light: #fef5e7;
}

/* 图案样式 - 应用到整个页面背景 */
body.pattern {
  --pattern-opacity: 0.05;
  --pattern-background-color: var(--primary-color);
}

/* 斜线图案 */
body.pattern-stripes {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(var(--primary-rgb), var(--pattern-opacity)),
    rgba(var(--primary-rgb), var(--pattern-opacity)) 10px,
    transparent 10px,
    transparent 20px
  );
}

/* 波点图案 */
body.pattern-dots {
  background-image: radial-gradient(rgba(var(--primary-rgb), var(--pattern-opacity)) 2px, transparent 2px);
  background-size: 20px 20px;
}

/* 格子图案 */
body.pattern-grid {
  background-image:
    linear-gradient(rgba(var(--primary-rgb), var(--pattern-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary-rgb), var(--pattern-opacity)) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 三角形图案 */
body.pattern-triangles {
  --triangle-size: 20px;
  --half-size: 10px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(var(--primary-rgb), var(--pattern-opacity)) 50%),
    linear-gradient(-45deg, transparent 50%, rgba(var(--primary-rgb), var(--pattern-opacity)) 50%);
  background-size: var(--triangle-size) var(--triangle-size);
}

/* 纸质纹理图案 - 轻微噪点 */
body.pattern-paper {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* 波浪纹理 (Wave Pattern) */
body.pattern-waves {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 0, 50 10 T 100 10' stroke='rgba(0,0,0,0.05)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 10 Q 25 20, 50 10 T 100 10' stroke='rgba(0,0,0,0.05)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100px 20px;
}

/* 六角形图案 (Hexagon Pattern) */
body.pattern-hexagons {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='rgba(0, 0, 0, 0.05)' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 28px 49px;
}

/* 箭头图案 (Arrow Pattern) */
body.pattern-arrows {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 30h30m-30 0l10-10m-10 10l10 10' stroke='rgba(0,0,0,0.05)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* 圆环图案 (Circles Pattern) */
body.pattern-circles {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='15' stroke='rgba(0,0,0,0.05)' stroke-width='1' fill='none'/%3E%3Ccircle cx='20' cy='20' r='10' stroke='rgba(0,0,0,0.05)' stroke-width='1' fill='none'/%3E%3Ccircle cx='20' cy='20' r='5' stroke='rgba(0,0,0,0.05)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* 十字图案 (Cross Pattern) */
body.pattern-crosses {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10h10M10 5v10' stroke='rgba(0,0,0,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

/* Theme switcher styles */
.theme-switcher {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  background: #f8f8f8;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1000;
  flex-wrap: wrap;
}

.theme-colors,
.theme-patterns {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.theme-section-title {
  font-size: 14px;
  color: #666;
  margin-right: 5px;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: transform 0.2s ease;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.active {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 2px #000;
}

.pattern-option {
  width: 40px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #ddd;
  background-color: #fff;
  position: relative;
  transition: transform 0.2s ease;
  overflow: hidden;
}

.pattern-option:hover {
  transform: scale(1.1);
}

.pattern-option.active {
  outline: 2px solid var(--primary-color);
  box-shadow: 0 0 0 1px #fff;
}

.pattern-option .pattern-preview {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.pattern-option-none .pattern-preview {
  background-image: none;
}

.pattern-option-stripes .pattern-preview {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 4px,
    transparent 4px,
    transparent 8px
  );
}

.pattern-option-dots .pattern-preview {
  background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px);
  background-size: 8px 8px;
}

.pattern-option-grid .pattern-preview {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 8px 8px;
}

.pattern-option-triangles .pattern-preview {
  background-image:
    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%);
  background-size: 8px 8px;
}

.pattern-option-paper .pattern-preview {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 新增的纹理模式预览 */
.pattern-option-waves .pattern-preview {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 0, 50 10 T 100 10' stroke='rgba(0,0,0,0.1)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 10 Q 25 20, 50 10 T 100 10' stroke='rgba(0,0,0,0.1)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 50px 10px;
}

.pattern-option-hexagons .pattern-preview {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='rgba(0, 0, 0, 0.1)' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 14px 24px;
}

.pattern-option-arrows .pattern-preview {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 30h30m-30 0l10-10m-10 10l10 10' stroke='rgba(0,0,0,0.1)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 30px 30px;
}

.pattern-option-circles .pattern-preview {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='15' stroke='rgba(0,0,0,0.1)' stroke-width='1' fill='none'/%3E%3Ccircle cx='20' cy='20' r='10' stroke='rgba(0,0,0,0.1)' stroke-width='1' fill='none'/%3E%3Ccircle cx='20' cy='20' r='5' stroke='rgba(0,0,0,0.1)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

.pattern-option-crosses .pattern-preview {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10h10M10 5v10' stroke='rgba(0,0,0,0.1)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 10px 10px;
}

.color-option-amber {
  background-color: #e53935;
}

.color-option-wine {
  background-color: #ff6600;
}

.color-option-golden {
  background-color: #d32f2f;
}

.color-option-coral {
  background-color: #ff5000;
}

.color-option-sienna {
  background-color: #2196f3;
}

.color-option-dark {
  background-color: #4caf50;
}

.color-option-green {
  background-color: #e67e22;
}