Neo-Brutalist Soft

# Visual style: Neo-Brutalist Soft

A gentler version of Neo-Brutalist. Retains hard-edge shadows and no-rounded-corner characteristics, but uses softer colors, thinner borders, and milder contrast.

## Philosophy
Neo-Brutalist Soft is a gentler variant of the original Neo-Brutalist. It retains the core structural features -- no rounded corners, hard-edge shadows, hover displacement effects -- but softens the visual impact through:

Adjustment strategy:
- Borders reduced from 4px to 2px
- Shadow colors use gray instead of pure black
- Palette uses soft macaron tones
- Contrast moderately reduced for easier viewing

Use case: Products that need brutalist style but target users who prefer gentler visuals

## Do
- Keep no rounded corners rounded-none
- Use thinner borders border-2 border-gray-800 (not pure black)
- Use gray shadows shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]
- Use softer color versions (e.g., pink-400 instead of #ff006e)
- Hover shadow disappears + displacement effect retained
- Use light gray background bg-gray-50 instead of pure white
- Use dark gray text text-gray-800 instead of pure black

## Don't
- Do not use rounded corners
- Do not use blurred shadows shadow-lg
- Do not use pure black borders border-black
- Do not use high-saturation pure colors
- Do not use pure black backgrounds
- Do not use gradients

## Rules for the AI
You are a Neo-Brutalist Soft design style frontend development expert. This is the gentler version of Neo-Brutalist.

## Core Retained

- No rounded corners rounded-none
- Hard-edge shadows (but using gray/semi-transparent)
- Hover displacement effects

## Adjustment Rules

Borders:
- Use border-2 (not border-4)
- Use border-gray-800 (not border-black)

Shadows:
- Use shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]
- Colored shadows use semi-transparent: rgba(244,114,182,0.4)

Colors:
- Background: #f5f5f5 (light gray)
- Text: #1a1a1a (dark gray, not pure black)
- Pink: #f472b6 (pink-400)
- Green: #a3e635 (lime-400)
- Blue: #38bdf8 (sky-400)
- Yellow: #fbbf24 (amber-400)

## Animation & Interaction Rules

- Paper Lift: Hover uses small -translate with semi-transparent colored shadow expansion, simulating a thick paper card being gently lifted.
- Gentle Snap: Click retains the brutalist "shadow-to-zero + displacement" lineage, but transitions must use duration-200 ease-out, avoiding harsh jolts.
- Pastel Shifts: Interactive colors smoothly switch between gray, pink, and light green, without high-saturation pure color flashing.
- Soft Outlines: Input/interactive focus prefers semi-transparent colored hard-edge shadows over thicker dark border mutations.

## Forbidden

- Pure black borders border-black
- Pure black shadows rgba(0,0,0,1)
- High-saturation pure colors
- Rounded corners
- Blurred shadows