# Theme Rules & Color Palette - Aperonight

Extracted from `app/views/pages/home.html.erb`

## Color Palette

### Primary Colors
- **Indigo**: `#4338ca` (rgb(67, 56, 202)) - Used in hero gradient
- **Purple**: `#8b5cf6` (rgb(139, 92, 246)) - Primary brand color
- **Pink**: `#ec4899` (rgb(236, 72, 153)) - Accent color

### Background Gradients
- **Hero**: `bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700`
- **CTA**: `bg-gradient-to-r from-purple-900 via-indigo-900 to-pink-900`
- **Cards**: `bg-gradient-to-br from-gray-800 to-gray-900`
- **Buttons**: `bg-gradient-to-r from-purple-600 to-pink-600`

### Text Colors
- **White**: `text-white` - Primary text
- **Gray-200**: `text-gray-200` - Secondary text
- **Gray-300**: `text-gray-300` - Subtle text
- **Gray-400**: `text-gray-400` - Muted text
- **Transparent gradient**: `text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400` - Special highlight

### Background Colors
- **Gray-900**: `bg-gray-900` - Main background
- **Black**: `bg-black` - Overlay backgrounds
- **Gray-800**: `bg-gray-800` - Card backgrounds
- **White/Transparent**: `bg-white bg-opacity-10 backdrop-blur-sm` - Glass effect

## Spacing & Layout

### Hero Section
- **Height**: `min-h-[70vh]`
- **Max-width**: `max-w-7xl mx-auto`
- **Padding**: `px-4 sm:px-6 lg:px-8`

### Grid Layouts
- **Responsive**: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
- **Gap**: `gap-8` standard spacing

### Padding Classes
- **Section**: `py-16`, `py-20`
- **Card**: `p-4`, `p-6`, `p-8`
- **Button**: `py-3`, `py-4`, `px-6`, `px-8`

## Typography

### Font Sizes
- **Hero Title**: `text-5xl md:text-7xl`
- **Section Title**: `text-4xl`
- **Card Title**: `text-2xl`
- **Body**: `text-xl`, `text-lg`
- **Small**: `text-sm`

### Font Weights
- **Bold**: `font-bold` (headings)
- **Semibold**: `font-semibold` (buttons, important text)
- **Medium**: `font-medium` (labels)

## Interactive States

### Hover Effects
- **Scale**: `hover:scale-105`
- **Transition**: `transition-all duration-300`
- **Button Hover**: `hover:from-purple-700 hover:to-pink-700`
- **Glass Hover**: `hover:bg-opacity-20`

### Shadows
- **Default**: `shadow-lg`
- **Strong**: `shadow-xl`
- **Card**: `shadow-2xl`

## Border Radius
- **Buttons**: `rounded-full` (pill-shaped)
- **Cards**: `rounded-2xl`
- **Inputs**: `rounded-lg`

## Icon Colors
- **Primary**: `text-white` (on colored backgrounds)
- **Accent**: `text-purple-400`, `text-pink-400`
- **Muted**: `text-gray-400`

## Usage Examples

### Primary Button
```html
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg"
```

### Card Background
```html
class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl"
```

### Hero Gradient
```html
class="bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700"
```

### Glass Effect
```html
class="bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-30"