/* ============================================================
 * 汉 · 装饰图案 (Patterns)
 * 中国风传统装饰纹样，可作为背景、边框、装饰线使用
 *
 * 使用方式：
 *   <div class="han-pattern-cloud">...</div>
 *   <div class="han-pattern-huiwen-border">...</div>
 *   <div class="han-pattern-icecrack">...</div>
 *
 * 所有图案使用 CSS 变量 --han-pattern-opacity 控制透明度
 * ============================================================ */

/* ========================================================
 * 1. 云纹 (Cloud Pattern)
 * 祥云瑞气，象征吉祥如意
 * 常用于背景装饰、边框
 * ====================================================== */

/* 云纹背景 */
.han-pattern-cloud {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1' opacity='0.15'%3E%3Cpath d='M20 60 Q20 40 40 40 Q45 30 55 35 Q65 30 70 40 Q90 40 90 60 Q90 80 70 80 Q65 85 55 80 Q45 85 40 80 Q20 80 20 60'/%3E%3Ccircle cx='40' cy='55' r='8'/%3E%3Ccircle cx='60' cy='50' r='10'/%3E%3Ccircle cx='80' cy='55' r='8'/%3E%3Cpath d='M30 50 Q30 45 35 45 M85 45 Q90 45 90 50'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* 云纹边框装饰 */
.han-pattern-cloud-border {
  position: relative;
}

.han-pattern-cloud-border::before,
.han-pattern-cloud-border::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q5 2 10 6 Q15 10 20 6 Q25 2 30 6 Q35 10 40 6' fill='none' stroke='%235e5a53' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

.han-pattern-cloud-border::before { top: 0; }
.han-pattern-cloud-border::after { bottom: 0; transform: scaleY(-1); }


/* ========================================================
 * 2. 回纹 (Huiwen Pattern)
 * 又称万字纹/回字形，象征连绵不断、万事如意
 * 常用于边框、装饰条
 * ====================================================== */

/* 回纹背景 */
.han-pattern-huiwen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1' opacity='0.12'%3E%3Cpath d='M10 10 L10 30 L30 30 L30 10'/%3E%3Cpath d='M20 20 L20 35 L35 35 L35 20'/%3E%3Cpath d='M40 40 L40 50 L50 50 L50 40'/%3E%3Cpath d='M10 40 L10 50 L20 50'/%3E%3Cpath d='M40 10 L50 10 L50 20'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* 回纹边框装饰 */
.han-pattern-huiwen-border {
  position: relative;
}

.han-pattern-huiwen-border::before,
.han-pattern-huiwen-border::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1.5' opacity='0.4'%3E%3Cpath d='M0 8 L0 2 L6 2 L6 8 L2 8 L2 14 L10 14 L10 8'/%3E%3Cpath d='M12 8 L12 2 L18 2 L18 8 L14 8 L14 14 L22 14 L22 8'/%3E%3Cpath d='M24 8 L24 2 L30 2 L30 8 L26 8 L26 14 L32 14'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

.han-pattern-huiwen-border::before { top: 0; }
.han-pattern-huiwen-border::after { bottom: 0; transform: scaleY(-1); }


/* ========================================================
 * 3. 冰裂纹 (Ice Crack Pattern)
 * 宋代汝窑瓷器特征，象征雅致、自然
 * 适合宋韵、青瓷等主题
 * ====================================================== */

/* 冰裂纹背景 */
.han-pattern-icecrack {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)'/%3E%3Cg stroke='%235e5a53' stroke-width='0.5' fill='none' opacity='0.2'%3E%3Cpath d='M30 20 L80 60 L50 120 L110 160 L70 190'/%3E%3Cpath d='M150 10 L180 50 L140 80 L190 130 L160 180'/%3E%3Cpath d='M10 100 L40 140 L20 180'/%3E%3Cpath d='M120 40 L160 70 L130 110'/%3E%3Cpath d='M90 30 L110 90 L80 140'/%3E%3C/g%3E%3Cg stroke='%235e5a53' stroke-width='0.3' fill='none' opacity='0.1'%3E%3Cline x1='0' y1='50' x2='200' y2='48'/%3E%3Cline x1='0' y1='120' x2='200' y2='122'/%3E%3Cline x1='50' y1='0' x2='52' y2='200'/%3E%3Cline x1='150' y1='0' x2='148' y2='200'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}


/* ========================================================
 * 4. 缠枝纹 (Chanzhi Pattern)
 * 又称缠枝莲，象征富贵连绵
 * 常用于高端装饰
 * ====================================================== */

/* 缠枝纹背景 */
.han-pattern-chanzhi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='0.8' opacity='0.12'%3E%3Cpath d='M80 20 C60 20 50 40 60 60 C70 80 90 80 100 60 C110 40 100 20 80 20'/%3E%3Cpath d='M20 80 C20 60 40 50 60 60 C80 70 80 90 60 100 C40 110 20 100 20 80'/%3E%3Cpath d='M140 80 C140 60 120 50 100 60 C80 70 80 90 100 100 C120 110 140 100 140 80'/%3E%3Cpath d='M80 140 C60 140 50 120 60 100 C70 80 90 80 100 100 C110 120 100 140 80 140'/%3E%3Ccircle cx='80' cy='80' r='8'/%3E%3Ccircle cx='80' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}


/* ========================================================
 * 5. 万字纹 (Wanzi Pattern)
 * 万字不断头，象征万福万寿、连绵不绝
 * ====================================================== */

/* 万字纹背景 */
.han-pattern-wanzi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1.5' opacity='0.15'%3E%3Crect x='30' y='10' width='20' height='60'/%3E%3Crect x='10' y='30' width='60' height='20'/%3E%3Cpath d='M40 10 L40 30 L60 30'/%3E%3Cpath d='M40 70 L40 50 L20 50'/%3E%3Cpath d='M10 40 L30 40 L30 20'/%3E%3Cpath d='M70 40 L50 40 L50 60'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}


/* ========================================================
 * 6. 回纹装饰线条
 * 可单独使用的装饰线条
 * ====================================================== */

/* 回纹装饰线（单条） */
.han-deco-huiwen {
  display: block;
  width: 100%;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1' opacity='0.4'%3E%3Cpath d='M2 10 L2 4 L8 4 L8 10 L4 10 L4 16 L12 16 L12 10'/%3E%3Cpath d='M14 10 L14 4 L20 4 L20 10 L16 10 L16 16 L24 16 L24 10'/%3E%3Cpath d='M26 10 L26 4 L32 4 L32 10 L28 10 L28 16 L36 16 L36 10'/%3E%3Cpath d='M38 10 L38 4 L40 4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

/* 云纹装饰线 */
.han-deco-cloud {
  display: block;
  width: 100%;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1' opacity='0.3'%3E%3Cpath d='M0 8 Q5 4 10 8 Q15 12 20 8 Q25 4 30 8 Q35 12 40 8 Q45 4 50 8 Q55 12 60 8'/%3E%3Ccircle cx='15' cy='8' r='2'/%3E%3Ccircle cx='45' cy='8' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
}


/* ========================================================
 * 7. 边角装饰 (Corner Ornaments)
 * 四角装饰，增强中国风韵味
 * ====================================================== */

/* 云纹角装饰 */
.han-corner-cloud {
  position: relative;
}

.han-corner-cloud::before,
.han-corner-cloud::after,
.han-corner-cloud > .han-corner-tr,
.han-corner-cloud > .han-corner-bl {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='1'%3E%3Cpath d='M2 2 Q6 2 6 6 M2 2 Q2 6 6 6'/%3E%3Cpath d='M4 4 Q4 8 8 8 Q8 4 4 4'/%3E%3Ccircle cx='6' cy='6' r='1' fill='%235e5a53' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: var(--han-pattern-opacity);
}

.han-corner-cloud::before { top: 4px; left: 4px; }
.han-corner-cloud::after { top: 4px; right: 4px; transform: scaleX(-1); }
.han-corner-cloud > .han-corner-tr { bottom: 4px; right: 4px; transform: scale(-1, -1); }
.han-corner-cloud > .han-corner-bl { bottom: 4px; left: 4px; transform: scaleY(-1); }


/* 回纹角装饰 */
.han-corner-huiwen {
  position: relative;
}

.han-corner-huiwen::before,
.han-corner-huiwen::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M2 2 L2 12 L12 12 L12 6 M6 6 L6 18 L18 18 L18 10 M10 10 L10 24 L24 24'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: var(--han-pattern-opacity);
}

.han-corner-huiwen::before { top: 0; left: 0; }
.han-corner-huiwen::after { bottom: 0; right: 0; transform: rotate(180deg); }


/* ========================================================
 * 8. 装饰条带 (Decorative Bands)
 * 用于内容区分、区域分隔
 * ====================================================== */

/* 云纹装饰带 */
.han-band-cloud {
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='0.8' opacity='0.15'%3E%3Cpath d='M0 12 Q10 6 20 12 Q30 18 40 12 Q50 6 60 12 Q70 18 80 12 Q90 6 100 12 Q110 18 120 12'/%3E%3Cpath d='M0 12 Q10 6 20 12' filter='blur(2px)'/%3E%3Ccircle cx='60' cy='12' r='3' fill='%23c0392b' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

/* 回纹装饰带 */
.han-band-huiwen {
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28' viewBox='0 0 80 28'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1' opacity='0.2'%3E%3Crect x='2' y='2' width='76' height='24' rx='2'/%3E%3Cpath d='M8 6 L8 22 L20 22 L20 10 L14 10 L14 18 L8 18'/%3E%3Cpath d='M28 6 L28 22 L40 22 L40 10 L34 10 L34 18 L28 18'/%3E%3Cpath d='M48 6 L48 22 L60 22 L60 10 L54 10 L54 18 L48 18'/%3E%3Cpath d='M68 6 L68 22 L78 22'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
}


/* ========================================================
 * 9. 渐变背景类
 * 便捷使用渐变令牌
 * ====================================================== */

.han-bg-gradient-ink {
  background: var(--han-gradient-ink);
  color: var(--han-color-paper-100);
}

.han-bg-gradient-sky {
  background: var(--han-gradient-sky);
}

.han-bg-gradient-vermilion {
  background: var(--han-gradient-vermilion);
  color: var(--han-color-paper-100);
}

.han-bg-gradient-gold {
  background: var(--han-gradient-gold);
}

.han-bg-gradient-paper {
  background: var(--han-gradient-paper);
}

.han-bg-gradient-celadon {
  background: var(--han-gradient-celadon);
}

.han-bg-gradient-indigo {
  background: var(--han-gradient-indigo);
  color: var(--han-color-paper-100);
}


/* ========================================================
 * 10. 混合背景：图案 + 渐变
 * 营造更丰富的视觉层次
 * ====================================================== */

/* 渐变 + 云纹 */
.han-bg-mix-sky-cloud {
  background-image:
    var(--han-gradient-sky),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'%3E%3Cpath d='M20 60 Q20 40 40 40 Q45 30 55 35 Q65 30 70 40 Q90 40 90 60 Q90 80 70 80 Q65 85 55 80 Q45 85 40 80 Q20 80 20 60'/%3E%3Ccircle cx='40' cy='55' r='8'/%3E%3Ccircle cx='60' cy='50' r='10'/%3E%3Ccircle cx='80' cy='55' r='8'/%3E%3C/g%3E%3C/svg%3E");
}

/* 渐变 + 冰裂纹 */
.han-bg-mix-ink-ice {
  background-image:
    var(--han-gradient-ink),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg stroke='%23ffffff' stroke-width='0.3' fill='none' opacity='0.15'%3E%3Cpath d='M30 20 L80 60 L50 120 L110 160 L70 190'/%3E%3Cpath d='M150 10 L180 50 L140 80 L190 130 L160 180'/%3E%3C/g%3E%3C/svg%3E");
}

/* 渐变 + 缠枝纹 */
.han-bg-mix-gold-chanzhi {
  background-image:
    var(--han-gradient-gold),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.08'%3E%3Cpath d='M80 20 C60 20 50 40 60 60 C70 80 90 80 100 60 C110 40 100 20 80 20'/%3E%3Cpath d='M20 80 C20 60 40 50 60 60 C80 70 80 90 60 100 C40 110 20 100 20 80'/%3E%3Ccircle cx='80' cy='80' r='8'/%3E%3C/g%3E%3C/svg%3E");
}


/* ========================================================
 * 11. 图案工具类 (Pattern Utility Classes)
 * 可独立使用或与组件组合的图案类
 * 所有图案不透明度 ≤ 0.15，保持含蓄优雅
 * ====================================================== */

/* 通用图案叠加层 — 为任意元素添加细微纹样 */
.han-pattern-overlay {
  position: relative;
}

.han-pattern-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='0.5' opacity='0.12'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='20'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: var(--han-pattern-overlay-opacity, 0.12);
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* 云纹背景 — 独立使用 */
.han-pattern-cloud-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1' opacity='0.12'%3E%3Cpath d='M20 60 Q20 40 40 40 Q45 30 55 35 Q65 30 70 40 Q90 40 90 60 Q90 80 70 80 Q65 85 55 80 Q45 85 40 80 Q20 80 20 60'/%3E%3Ccircle cx='40' cy='55' r='8'/%3E%3Ccircle cx='60' cy='50' r='10'/%3E%3Ccircle cx='80' cy='55' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 120px;
}

/* 回纹背景 — 独立使用 */
.han-pattern-huiwen-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%235e5a53' stroke-width='1' opacity='0.10'%3E%3Cpath d='M10 10 L10 30 L30 30 L30 10'/%3E%3Cpath d='M20 20 L20 35 L35 35 L35 20'/%3E%3Cpath d='M40 40 L40 50 L50 50 L50 40'/%3E%3Cpath d='M10 40 L10 50 L20 50'/%3E%3Cpath d='M40 10 L50 10 L50 20'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
}

/* 冰裂纹背景 — 独立使用 */
.han-pattern-binglie-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg stroke='%235e5a53' stroke-width='0.5' fill='none' opacity='0.15'%3E%3Cpath d='M30 20 L80 60 L50 120 L110 160 L70 190'/%3E%3Cpath d='M150 10 L180 50 L140 80 L190 130 L160 180'/%3E%3Cpath d='M10 100 L40 140 L20 180'/%3E%3Cpath d='M120 40 L160 70 L130 110'/%3E%3Cpath d='M90 30 L110 90 L80 140'/%3E%3C/g%3E%3Cg stroke='%235e5a53' stroke-width='0.3' fill='none' opacity='0.08'%3E%3Cline x1='0' y1='50' x2='200' y2='48'/%3E%3Cline x1='0' y1='120' x2='200' y2='122'/%3E%3Cline x1='50' y1='0' x2='52' y2='200'/%3E%3Cline x1='150' y1='0' x2='148' y2='200'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}