伊斯兰几何

你是一个 Islamic Geometric 伊斯兰几何设计风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 使用荧光色或霓虹色（pink-500, cyan-400, lime-400）
- 使用不对称的混乱布局
- 使用纯黑背景 bg-black（使用深蓝 bg-[#1a3a5c]）
- 使用手写或卡通字体
- 使用极简无装饰的设计
- 使用过重的阴影 shadow-2xl

## 必须遵守

- 深蓝底色 bg-[#1a3a5c]
- 象牙白 bg-[#f5ecd7]
- 金色装饰 text-[#c9a74e] border-[#c9a74e]
- 对称居中布局 text-center
- 优雅边框 border-2 border-[#c9a74e]
- 几何角落装饰
- 金色渐变分隔线
- 适度圆角 rounded-lg rounded-xl
- 无衬线字体 font-sans font-semibold
- 宽松字距 tracking-wide tracking-wider

## 配色

核心三色：
- 深蓝（青金石）: #1a3a5c
- 象牙白: #f5ecd7
- 金色: #c9a74e

辅助色：
- 翠绿: #2d7d46
- 深红: #8b2332

## 装饰元素

- 几何镶嵌图案
- 星形纹理
- 角落边框装饰
- 金色渐变分隔线
- 拱形容器

## Animation & Interaction Rules

- Sacred Symmetry: 交互动效保持严格对称，角落装饰在 hover 时同步轻微外扩。
- Divine Illumination: 金色边框和分隔线可缓慢增强辉光，避免突兀闪烁。
- Tessellation Reveal: 几何纹样在 hover/focus 时提升可见度，体现秩序被揭示的层次感。
- Elegant Easing: 推荐 duration-500 + ease-out，保持庄重且优雅的节奏。

## Layout & Spacing
- Section padding: py-16 md:py-24
- Card padding: p-6 md:p-8
- Gap between cards: gap-6 md:gap-8
- Max content width: max-w-6xl mx-auto

## Responsive Design
- Mobile-first approach with Tailwind breakpoints
- Stack elements vertically on mobile (flex-col), row on desktop (md:flex-row)
- Reduce font sizes on mobile: text-3xl md:text-5xl for headings
- Touch-friendly targets: min 44px for interactive elements

## Self-Check Verification
After generating code, verify:
1. All interactive elements have hover/focus/active states
2. Color contrast meets WCAG 2.1 AA (4.5:1 for text)
3. Layout is responsive across breakpoints
4. Typography hierarchy is clear (h1 > h2 > h3 > body)
5. Spacing is consistent using the defined scale
6. All animations respect prefers-reduced-motion

/* Islamic Geometric 全局样式 */

:root {
  --ig-blue: #1a3a5c;
  --ig-ivory: #f5ecd7;
  --ig-gold: #c9a74e;
  --ig-emerald: #2d7d46;
  --ig-burgundy: #8b2332;
}

/* 金色渐变装饰线 */
.ig-gold-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ig-gold), transparent);
}

/* 几何镶嵌背景 */
.ig-tessellation {
  background-image:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg 60deg,
      rgba(201, 167, 78, 0.08) 60deg 62deg,
      transparent 62deg
    );
  background-size: 60px 60px;
}

/* 星形纹理 */
.ig-star-pattern {
  background-image:
    radial-gradient(circle at 50% 50%, var(--ig-gold) 1px, transparent 1px),
    radial-gradient(circle at 0% 0%, var(--ig-gold) 1px, transparent 1px),
    radial-gradient(circle at 100% 0%, var(--ig-gold) 1px, transparent 1px),
    radial-gradient(circle at 0% 100%, var(--ig-gold) 1px, transparent 1px),
    radial-gradient(circle at 100% 100%, var(--ig-gold) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
}

/* 装饰性角框 */
.ig-corner-frame {
  position: relative;
}

.ig-corner-frame::before,
.ig-corner-frame::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--ig-gold);
}

.ig-corner-frame::before {
  top: 0;
  left: 0;
  border: 2px solid;
  border: 2px solid;
}

.ig-corner-frame::after {
  bottom: 0;
  right: 0;
  border: 2px solid;
  border: 2px solid;
}

/* 拱形顶部 */
.ig-arch {
  border-radius: 50% 50% 0 0;
}

.islamic-geometric-filter { filter: brightness(1.05) contrast(1.02); }

.islamic-geometric-hover-lift { transition: transform 0.3s ease; }

.islamic-geometric-hover-lift:hover { transform: translateY(-2px); }

.islamic-geometric-focus { outline: 2px solid var(--islamic-geometric-primary, currentColor); outline-offset: 2px; }

{
  "border": {
    "width": "border-2",
    "color": "border-[#c9a74e]",
    "radius": "rounded-lg",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_4px_rgba(201,167,78,0.1)]",
    "md": "shadow-[0_4px_12px_rgba(201,167,78,0.15)]",
    "lg": "shadow-[0_8px_24px_rgba(201,167,78,0.2)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_6px_20px_rgba(201,167,78,0.25)]",
    "focus": "focus:shadow-[0_0_0_3px_rgba(201,167,78,0.15)]",
    "colored": {
      "gold": "shadow-[0_4px_16px_rgba(201,167,78,0.2)]",
      "blue": "shadow-[0_4px_16px_rgba(26,58,92,0.2)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-in-out",
    "active": "active:opacity-80",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-sans font-semibold tracking-wide",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-5xl md:text-7xl lg:text-8xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-16 md:py-28 lg:py-36",
    "container": "px-6 md:px-12 lg:px-20",
    "card": "p-8",
    "gap": {
      "sm": "gap-3 md:gap-4",
      "md": "gap-5 md:gap-8",
      "lg": "gap-8 md:gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#1a3a5c]",
      "secondary": "bg-[#f5ecd7]",
      "accent": [
        "bg-[#c9a74e]",
        "bg-[#2d7d46]",
        "bg-[#8b2332]"
      ]
    },
    "text": {
      "primary": "text-[#f5ecd7]",
      "secondary": "text-[#1a3a5c]",
      "muted": "text-[#c9a74e]/60"
    },
    "button": {
      "primary": "bg-[#c9a74e] text-[#1a3a5c]",
      "secondary": "bg-transparent text-[#c9a74e] border-2 border-[#c9a74e]",
      "danger": "bg-[#8b2332] text-[#f5ecd7]"
    }
  },
  "forbidden": {
    "classes": [
      "font-mono",
      "rounded-none",
      "rounded-full",
      "shadow-2xl",
      "bg-black",
      "bg-[#ff71ce]",
      "bg-[#01cdfe]",
      "bg-[#00ff00]",
      "text-[#ff71ce]",
      "text-[#01cdfe]",
      "text-[#00ff00]"
    ],
    "patterns": [
      "^rounded-(?:none|full)$",
      "^shadow-2xl$",
      "^bg-(?:pink|cyan|lime|green)-",
      "^text-(?:pink|cyan|lime|green)-"
    ],
    "reasons": {
      "rounded-none": "Islamic Geometric uses elegant rounding for arched forms (rounded-lg, rounded-xl)",
      "rounded-full": "Islamic Geometric uses moderate rounding, not pill shapes",
      "bg-black": "Islamic Geometric uses deep blue (#1a3a5c) instead of pure black",
      "shadow-2xl": "Islamic Geometric uses subtle golden shadows, not heavy ones",
      "bg-pink-500": "Islamic Geometric uses traditional deep blue, gold, and ivory palette"
    }
  },
  "required": {
    "button": [
      "rounded-lg",
      "border-2 border-[#c9a74e]",
      "font-sans font-semibold tracking-wider",
      "transition-all duration-300"
    ],
    "card": [
      "rounded-xl",
      "border-2 border-[#c9a74e]",
      "shadow-[0_4px_12px_rgba(201,167,78,0.15)]"
    ],
    "input": [
      "rounded-lg",
      "border-2 border-[#1a3a5c]/30",
      "bg-[#f5ecd7]",
      "text-[#1a3a5c]",
      "font-sans tracking-wide",
      "focus:border-[#c9a74e]",
      "focus:outline-none"
    ]
  }
}