## Theme Overview

City Lights embodies the sleek sophistication of a modern metropolis at night. Deep, near-black backgrounds evoke the urban darkness, while vibrant neon accents mimic the electric glow of city lights, creating a high-contrast, elegant aesthetic perfect for premium applications and modern interfaces.

### Design Philosophy

- Dark Foundation: Near-black backgrounds with subtle blue undertones
- High Contrast: Bright accents against deep shadows
- Neon Energy: Electric colors inspired by city nightlife
- Elegant Modern: Sophisticated and professional

### Perfect For

- Premium Apps: High-end software interfaces
- Tech Products: Developer tools and platforms
- Creative Studios: Design and media agencies
- Modern Brands: Forward-thinking companies

### Key Features

- Subtle Glows: Neon shadow effects
- Sharp Corners: 2-6px radius range
- Vibrant Palette: Four accent color systems
- WCAG AAA: Exceptional readability

## Neon Color Palette

#### Neon System

`#00d9ff`

Electric cyan & blue

#### Cyber System

`#b968ff`

Neon purple

#### Glow System

`#ffd700`

Neon gold & amber

#### Alert System

`#ff6ec7`

Neon pink

### Background Spectrum

`#0a0e1a`

Deep midnight

`#0f1419`

Dark steel

`#141922`

Charcoal blue

### Text Hierarchy

Primary Text `#f0f6fc`
Secondary Text `#c9d1d9`
Muted Text `#8b949e`

## Typography System

# H1 Heading with Gradient

## H2 Heading - Electric Cyan

### H3 Heading - Neon Purple

#### H4 Heading - Neon Gold

##### H5 Heading - Primary Bright

###### H6 Heading - All Caps

Body text uses IBM Plex Sans for optimal readability in the dark theme. The high contrast between the bright text and deep backgrounds ensures comfortable reading for extended periods.

Muted text is perfect for supplementary information and metadata.

## Button Styles

### Primary Actions

### Alternative Styles

## Card Components

### Standard Card

Default card with subtle background and border. Hover for lift effect.

### Solid Card

Opaque background for emphasis and hierarchy.

### Elevated Card

Enhanced shadow for prominent content sections.

### Neon Accent

Electric cyan border with subtle glow effect.

### Cyber Accent

Neon purple border with purple glow effect.

### Glow Accent

Neon gold border with warm glow effect.

## Alert Messages

### Info Alert

Electric cyan accent with subtle glow - perfect for general information.

### Success Alert

Neon purple accent with purple glow - great for success messages.

### Warning Alert

Neon gold accent with warm glow - ideal for warnings and cautions.

### Danger Alert

Neon pink accent with pink glow - for critical alerts and errors.

## Code Display

### Inline Code

Use `inline code` for variable names, `function()` calls, and `CSS properties` within text.

### Code Blocks

    // Neon color system
    const colors = {
      neon: '#00d9ff',    // Electric cyan
      cyber: '#b968ff',   // Neon purple
      glow: '#ffd700',    // Neon gold
      alert: '#ff6ec7'    // Neon pink
    };

    // Apply glow effect
    element.style.boxShadow = '0 0 20px rgba(0, 217, 255, 0.5)';

## Data Tables

### Color Variables Reference

Variable | Color | Usage
--- | --- | ---
`--accent-neon-1` | #00d9ff | Primary actions, links
`--accent-cyber-1` | #b968ff | Secondary accents
`--accent-glow-1` | #ffd700 | Highlights, warnings
`--accent-alert-1` | #ff6ec7 | Alerts, errors
`--text-primary` | #f0f6fc | Main text content

## Implementation Guide

### Glow Effects System

City Lights uses subtle glow effects to create the neon aesthetic:

    /* Glow variables */
    --glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
    --glow-purple: 0 0 20px rgba(185, 104, 255, 0.3);
    --glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
    --glow-pink: 0 0 20px rgba(255, 110, 199, 0.3);

    /* Application */
    h2 { text-shadow: var(--glow-cyan); }
    .btn-primary { box-shadow: var(--glow-cyan); }

### Design Principles

- High Contrast: Bright text on near-black backgrounds
- Subtle Animation: Smooth transitions on all interactive elements
- Consistent Glow: Apply shadow effects to all accent colors
- Sharp Corners: Maintain 2-6px radius range
- Depth Through Darkness: Layer opacity for visual hierarchy

### Best Practices

- Use Sparingly: Neon accents work best as highlights
- Dark Foundations: Keep backgrounds very dark
- Readable Text: Ensure WCAG AAA contrast ratios
- Hover States: Enhance glows on interaction
- Balance Energy: Mix cool and warm accent colors

### Technical Specifications

- Background Range: #0a0e1a to #141922 (near-black with blue tint)
- Border Contrast: 30-50% lighter than backgrounds
- Text Contrast: WCAG AAA compliant (7:1 or higher)
- Glow Opacity: 0.3 for shadows, 0.5 for hover states
- Border Radius: 2px-6px range for sharp modern aesthetic

## Theme Comparison

### City Lights Theme

- Background: Near-black (#0a0e1a)
- Aesthetic: Modern, urban, neon
- Contrast: Very high (AAA)
- Accents: Vibrant neon colors
- Mood: Energetic, sophisticated
- Use Case: Tech, creative, premium

### Corporate Theme

- Background: Dark blue-gray (#1a1d2e)
- Aesthetic: Professional, twilight
- Contrast: High (AA+)
- Accents: Muted warm/cool tones
- Mood: Calm, professional
- Use Case: Business, corporate