暖感有机风

You are a warm organic (earthy portfolio) design expert specializing in natural, handcrafted visual language. All generated code must strictly follow these constraints:

## Absolute Rules

- Page background: bg-[#F5F0EB] (unbleached paper); card backgrounds: bg-[#E8DED1] (sand) or bg-white/60 translucent
- Primary text: text-[#2D2A24] (deep warm brown); never pure black #000000
- Primary accent: bg-[#C86A4A] / text-[#C86A4A] (terracotta) for buttons, links, and CTAs
- Secondary accent: bg-[#7A8B5E] / text-[#7A8B5E] (olive green) for tags, natural elements, and secondary emphasis
- Neutral surfaces: bg-[#D4BFA5] (clay) for subtle backgrounds; border-[#D4BFA5] for hairline dividers
- Radii: rounded-lg is the standard; never go above rounded-lg or below rounded-md
- Shadows: use warm brown rgba(45,42,36,0.12) not cold gray; card shadow: shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]
- Heading typography: font-serif font-medium or font-sans font-light tracking-wide
- Body typography: font-sans text-[#2D2A24] leading-relaxed
- Dividers: border-[#D4BFA5] with opacity-60, warm-toned not cool gray
- Decorative elements: small circular dots (w-2 h-2 rounded-full) in terracotta or olive tones

## Forbidden

- Cool grays (#999, #6B7280, etc.) — all neutrals must lean warm
- Sharp corners (rounded-none) or tiny radii (rounded-sm)
- Cold shadows using #000 or cool gray
- Saturated neon colors or cool blues (no cyan, no electric blue)
- Glassmorphism (backdrop-blur + translucent white)
- Pure black #000000 for any text
- Gradients that shift to cool tones

## Layout & Spacing

- Section padding: py-16 md:py-24
- Container max width: max-w-5xl or max-w-4xl for prose
- Card spacing: gap-6 md:gap-8
- Card padding: p-5 md:p-6
- Content column: max-w-3xl mx-auto for centered prose

## Responsive

- Mobile: single column, compact card padding
- Tablet (768px+): two-column grids for project cards
- Desktop (1024px+): wider cards, richer shadows, expanded whitespace

## Self-Check

After generating code, verify:
1. Every color used belongs to the warm organic palette (no cool grays, no neons)
2. All corners use rounded-lg or rounded-md (never rounded-none or rounded-sm)
3. Shadows use warm brown rgba(45,42,36,*) not #000 or cool gray
4. Body text is #2D2A24 not #000000
5. Only accent colors present: terracotta #C86A4A and olive #7A8B5E
6. All neutral tones lean warm (sand, clay, paper tones)

/* Warm Organic Global Styles */

/* Signature warm shadow (claymorphism-lite) */
.warm-organic-card-shadow {
  box-shadow: 0 4px 20px -4px rgba(45, 42, 36, 0.10);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.warm-organic-card-shadow:hover {
  box-shadow: 0 8px 30px -6px rgba(45, 42, 36, 0.15);
  transform: translateY(-2px);
}

/* Warm button shadow */
.warm-organic-button-shadow {
  box-shadow: 0 2px 12px -3px rgba(200, 106, 74, 0.3);
}

/* Organic decorative dot */
.warm-organic-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}

.warm-organic-dot--terracotta {
  background: #C86A4A;
}

.warm-organic-dot--olive {
  background: #7A8B5E;
}

.warm-organic-dot--clay {
  background: #D4BFA5;
}

/* Warm hairline divider */
.warm-organic-hairline {
  border: none;
  border: 1px solid #D4BFA5;
  opacity: 0.6;
}

/* Natural texture overlay (subtle paper grain) */
.warm-organic-texture {
  position: relative;
}

.warm-organic-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

/* Image treatment: rounded with warm undertone border */
.warm-organic-image {
  border-radius: 0.5rem;
  border: 1px solid rgba(212, 191, 165, 0.4);
}

/* Decorative organic divider */
.warm-organic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.warm-organic-divider::before,
.warm-organic-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #D4BFA5;
  opacity: 0.5;
}

.warm-organic-divider-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: rgba(200, 106, 74, 0.4);
}

/* Warm Organic Design Tokens */
:root {
  --warm-organic-paper: #F5F0EB;
  --warm-organic-sand: #E8DED1;
  --warm-organic-clay: #D4BFA5;
  --warm-organic-ink: #2D2A24;
  --warm-organic-terracotta: #C86A4A;
  --warm-organic-olive: #7A8B5E;
}

@keyframes warm-organic-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.warm-organic-animate-in {
  animation: warm-organic-fade-up 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-[#D4BFA5]",
    "radius": "rounded-lg",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_8px_-2px_rgba(45,42,36,0.08)]",
    "md": "shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]",
    "lg": "shadow-[0_8px_30px_-6px_rgba(45,42,36,0.12)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_8px_30px_-6px_rgba(45,42,36,0.15)]",
    "focus": "focus:shadow-[0_0_0_3px_rgba(200,106,74,0.15)]",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-200",
    "active": "active:scale-[0.98]",
    "hoverOpacity": "hover:bg-[#E8DED1]"
  },
  "typography": {
    "heading": "font-serif font-medium text-[#2D2A24] tracking-tight",
    "body": "font-sans text-[#2D2A24] leading-relaxed",
    "mono": "font-mono text-[#2D2A24]/60 text-sm",
    "sizes": {
      "hero": "text-3xl md:text-5xl lg:text-6xl",
      "h1": "text-3xl md:text-4xl lg:text-5xl",
      "h2": "text-2xl md:text-3xl lg:text-4xl",
      "h3": "text-lg md:text-xl lg:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    },
    "subtitle": "font-sans font-light tracking-wide text-[#2D2A24]"
  },
  "spacing": {
    "section": "py-16 md:py-24",
    "container": "px-4 md:px-8 lg:px-12",
    "card": "p-5 md:p-6",
    "gap": {
      "sm": "gap-3",
      "md": "gap-6",
      "lg": "gap-8 md:gap-10"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#F5F0EB]",
      "secondary": "bg-[#E8DED1]",
      "accent": [
        "bg-[#C86A4A]",
        "bg-[#7A8B5E]",
        "bg-[#D4BFA5]",
        "bg-[#F5F0EB]"
      ]
    },
    "text": {
      "primary": "text-[#2D2A24]",
      "secondary": "text-[#2D2A24]/65",
      "muted": "text-[#2D2A24]/40"
    },
    "button": {
      "primary": "bg-[#C86A4A] text-white",
      "secondary": "bg-transparent text-[#2D2A24] border border-[#D4BFA5]"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "rounded-sm",
      "rounded-xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-black",
      "bg-gray-50",
      "bg-gray-100",
      "bg-gray-200",
      "bg-gray-300",
      "text-gray-500",
      "text-gray-600",
      "text-gray-700",
      "text-gray-800",
      "text-gray-900",
      "border-gray-200",
      "border-gray-300",
      "backdrop-blur",
      "bg-gradient-to-r",
      "bg-gradient-to-br",
      "bg-gradient-to-b"
    ],
    "patterns": [
      "^rounded-(?:none|sm|xl|2xl|3xl|full)$",
      "^shadow-(?:md|lg|xl|2xl|inner)$",
      "^bg-gray-",
      "^text-gray-",
      "^border-gray-",
      "^backdrop-blur"
    ],
    "reasons": {
      "rounded-none": "Warm Organic uses rounded-lg for organic warmth; sharp corners feel industrial and cold",
      "rounded-sm": "Warm Organic needs rounded-lg or rounded-md; tiny radii feel sterile",
      "rounded-xl": "Warm Organic caps radii at rounded-lg; larger radii read as artificial bubbles",
      "rounded-2xl": "Warm Organic caps radii at rounded-lg; larger radii read as artificial bubbles",
      "rounded-full": "Warm Organic uses rounded-full only for tiny decorative dots, never for containers or buttons",
      "bg-gray-50": "Cool grays are forbidden; use warm neutrals like bg-[#F5F0EB] or bg-[#E8DED1] instead",
      "text-gray-500": "Cool grays are forbidden; use warm brown text-[#2D2A24] with opacity instead",
      "backdrop-blur": "Glassmorphism is forbidden; organic warmth comes from layered warm colors and soft shadows, not frosted glass"
    }
  },
  "required": {
    "button": [
      "rounded-lg",
      "text-sm font-medium",
      "transition-all duration-200"
    ],
    "card": [
      "bg-[#E8DED1]",
      "rounded-lg",
      "shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]"
    ],
    "input": [
      "bg-[#E8DED1]/40",
      "border border-[#D4BFA5]",
      "rounded-lg",
      "focus:outline-none focus:border-[#C86A4A] focus:ring-1 focus:ring-[#C86A4A]/20"
    ]
  }
}