docs: add style guide for casino gaming platform

frontend/styleguide.md

@@ -0,0 +1,123 @@
+# 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