# Black Canyon Tickets - Design System

## Overview
This design system implements a modern glassmorphism theme with a dark gradient background, creating a premium, upscale aesthetic suitable for high-end venues.

## Color Palette

### Primary Colors
- **Blue**: `rgb(37, 99, 235)` - Primary actions, focus states
- **Purple**: `rgb(147, 51, 234)` - Secondary actions, accents
- **Indigo**: `rgb(67, 56, 202)` - Background gradients
- **Slate**: `rgb(51, 65, 85)` - Background gradients

### Status Colors
- **Success**: `rgb(52, 211, 153)` - Emerald-400
- **Warning**: `rgb(251, 191, 36)` - Yellow-400  
- **Error**: `rgb(248, 113, 113)` - Red-400

### Text Colors
- **Primary**: `white` - Main headings and content
- **Secondary**: `rgba(255, 255, 255, 0.8)` - Supporting text
- **Tertiary**: `rgba(255, 255, 255, 0.6)` - Helper text
- **Accent**: `rgb(96, 165, 250)` - Links and highlights

## Typography

### Font Weights
- **Light**: `font-light` - Large headings (text-4xl and above)
- **Regular**: Default - Body text
- **Medium**: `font-medium` - Navigation, buttons
- **Semibold**: `font-semibold` - Form labels, small headings
- **Bold**: `font-bold` - Emphasis elements

### Font Sizes
- **Hero**: `text-5xl lg:text-7xl` - Homepage hero
- **Page Title**: `text-4xl md:text-5xl` - Main page headings
- **Section**: `text-2xl` - Section headings
- **Subsection**: `text-xl` - Subsection headings
- **Body**: `text-base` - Default body text
- **Small**: `text-sm` - Supporting text
- **Tiny**: `text-xs` - Captions, metadata

## Layout Components

### Background Pattern
```css
.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}
```

### Animated Background Elements
- **Floating orbs**: Positioned at corners and center
- **Gradient colors**: Purple/pink, blue/cyan, indigo/purple
- **Animation**: `animate-pulse` for subtle movement
- **Blur**: `blur-3xl` for soft, ambient lighting

### Container Patterns
- **Page container**: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`
- **Content container**: `max-w-4xl mx-auto` (forms, focused content)
- **Narrow container**: `max-w-2xl mx-auto` (scanners, simple layouts)

## Glassmorphism Components

### Card Styles
```css
/* Basic glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Large glass card */
.glass-card-lg {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.15);
}
```

### Button Styles

#### Primary Button (Gradient)
```css
.gradient-button {
  background: linear-gradient(to right, rgb(37, 99, 235), rgb(147, 51, 234));
  transition: all 0.3s ease;
}

.gradient-button:hover {
  background: linear-gradient(to right, rgb(29, 78, 216), rgb(126, 34, 206));
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3);
}
```

#### Secondary Button (Glass)
```css
.glass-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
```

### Form Elements
```css
.glass-input {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.3s ease;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgb(96, 165, 250);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
  outline: none;
}
```

## Page-Specific Implementations

### Dashboard
- **Stats cards**: Hover effects with scale and shadow
- **Event cards**: Glassmorphism with gradient badges
- **Calendar view**: Integrated glass design
- **Navigation**: Sticky with backdrop blur

### Event Creation
- **Form container**: Large glass card with rounded corners
- **Input fields**: Consistent glass styling
- **Section dividers**: Subtle white borders
- **Buttons**: Gradient primary, glass secondary

### Event Management
- **Header section**: Gradient background with stats
- **Management tabs**: Glass navigation with active states
- **Content areas**: Consistent glass containers
- **Action buttons**: Gradient styling with hover effects

### Ticket Scanner
- **Scanner interface**: Centered glass card
- **Camera overlay**: Subtle frame with blue corners
- **Results display**: Color-coded status messages
- **Navigation**: Sticky glass navbar

## Animations

### Keyframes
```css
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
```

### Usage
- **Page entry**: `animate-fadeInUp` for content sections
- **Navigation**: `animate-slideIn` for menu items
- **Floating elements**: `animate-float` for decorative elements
- **Hover effects**: `hover:scale-105` for interactive elements

## Responsive Design

### Breakpoints
- **Mobile**: `sm:` (640px+)
- **Tablet**: `md:` (768px+)
- **Desktop**: `lg:` (1024px+)
- **Large Desktop**: `xl:` (1280px+)

### Mobile Optimizations
- Reduced blur effects for performance
- Simplified animations
- Touch-friendly button sizes
- Collapsed navigation patterns

## Accessibility

### Focus States
- **Visible outlines**: `focus:ring-2 focus:ring-blue-400`
- **Color contrast**: WCAG AA compliant
- **Keyboard navigation**: Full support
- **Screen readers**: Proper ARIA labels

### High Contrast Mode
- **Fallback colors**: Maintained readability
- **Border emphasis**: Enhanced visibility
- **Button states**: Clear differentiation

## Brand Guidelines

### Logo Usage
- **Secure areas**: Subtle opacity (20%) in top corner
- **Public areas**: Full opacity in navigation
- **Size**: Consistent 48px height
- **Spacing**: Minimum 24px clearance

### Voice & Tone
- **Professional**: Upscale, refined language
- **Concise**: Clear, direct messaging
- **Welcoming**: Approachable for users
- **Confident**: Authoritative but not intimidating

## File Structure

```
src/
├── layouts/
│   ├── Layout.astro          # Base layout
│   └── SecureLayout.astro    # Glassmorphism layout
├── styles/
│   ├── global.css           # Global styles + imports
│   └── glassmorphism.css    # Design system utilities
├── components/
│   ├── Navigation.astro     # Consistent navigation
│   └── [other components]
└── pages/
    ├── index.astro          # Homepage (reference design)
    ├── calendar.astro       # Calendar (reference design)
    ├── dashboard.astro      # Dashboard implementation
    ├── events/
    │   ├── new.astro       # Event creation
    │   └── [id]/
    │       └── manage.astro # Event management
    └── scan.astro          # Ticket scanner
```

## Usage Guidelines

### New Pages
1. Use `SecureLayout.astro` for authenticated pages
2. Import glassmorphism utilities: `@import './glassmorphism.css'`
3. Follow container patterns for consistent spacing
4. Use established color and typography scales

### New Components
1. Apply `glass-card` classes for containers
2. Use `gradient-button` for primary actions
3. Apply `glass-input` for form elements
4. Include hover states with scale effects

### Maintenance
- **Consistency**: Regular design audits
- **Performance**: Monitor blur effects on mobile
- **Accessibility**: Test with screen readers
- **Updates**: Document any pattern changes

This design system creates a cohesive, premium experience that reflects the upscale nature of Black Canyon Tickets' target market while maintaining excellent usability and accessibility standards.