# Casino Gaming Platform Style Guide

## Color Palette

### Primary Colors
- Deep Blue: `#0a1219` (background)
- Deep Blue Light: `#121e27` (secondary background)
- Deep Blue Contrast: `#1a2835` (cards, elements)

### Accent Colors
- Emerald: `#10b981` (primary buttons)
- Emerald Dark: `#059669` (button hover)
- Emerald Light: `#34d399` (highlights)

### Text Colors
- Primary Text: `#ffffff` (white)
- Secondary Text: `#94a3b8` (light gray)
- Tertiary Text: `#64748b` (darker gray)

### Additional Accents
- Yellow: `#fbbf24`
- Red: `#ef4444`
- Purple: `#8b5cf6`

## Typography

### Font Sizes
- Extra Small: Text-xs (footer disclaimers)
- Small: Text-sm (navigation links, footer links)
- Base: Text-base (general text)
- Large: Text-lg (section headings)
- Extra Large: Text-xl (stat numbers, game headings)
- Display: Text-4xl/5xl/7xl (welcome bonus text)

### Font Weights
- Normal: General text
- Medium: Labels
- Semibold: Navigation brand
- Bold: Headings, stats
- Extrabold: Welcome bonus text

## Components

### Buttons
- Primary: Emerald background with hover state
- Secondary: Deep blue light background with hover state
- All buttons have active scale effect (95%)
- Transition duration: 200-300ms

### Cards
- Background: Deep blue contrast
- Rounded corners (lg)
- Shadow effects with hover transition
- Consistent padding (p-4)

### Navigation
- Desktop: Horizontal links with hover effects
- Mobile: Collapsible menu with toggle
- Links have color and background transitions

### Modals
- Backdrop blur with dark overlay
- Card-style container with emerald focus rings
- Consistent form styling with transitions

## Forms

### Inputs
- Dark background with border
- Focus states with emerald accent
- Consistent padding and rounded corners
- Clear label positioning

## Layout

### Grid System
- Mobile-first responsive grid
- Breakpoints: sm, md, lg
- Grid columns: 1 (mobile), 2 (tablet), 3 (desktop)
- Consistent gap spacing (gap-4)

### Spacing
- Consistent margin/padding scale
- Mobile-responsive spacing adjustments

## Animation

- Transitions: 200-500ms duration
- Hover/active state animations
- Scale transformations (95-110%)
- Opacity transitions for navigation elements

## Components & Classes

### Common UI Elements
- `.card` - Base card container
- `.button-primary` - Main CTA buttons
- `.button-secondary` - Alternative action buttons
- `.section-heading` - Section titles
- `.nav-link` - Navigation links
- `.modal-card` - Modal container

### Game Elements
- `.game-card-content` - Game information container
- `.game-heading-sm` - Small game titles
- `.game-heading-xl` - Large game titles
- `.game-text` - Game descriptions
- `.slider-container` - Game carousel container

## Responsive Design

- Mobile-first approach
- Tailwind breakpoints (sm, md, lg)
- Different layouts based on screen size
- Responsive text sizing and spacing
- Hidden/visible elements using responsive classes

## CSS Framework

- Tailwind CSS for utility classes
- Custom utility classes with @apply directive
- CSS variables for theming
- Component-based styling approach