I'm building a WordPress theme based on Underscores for a coffee shop website. Help me create a comprehensive color system for my brand. Please:
1. Generate a cohesive color palette with primary, secondary, and neutral colors
2. Create CSS custom properties (variables) for these colors
3. Include accessibility considerations (contrast ratios)
4. Provide both hex and HSL values
5. Suggest how to organize these in my theme's style.css

Brand context: Modern coffee shop with a warm, welcoming atmosphere. Target audience includes coffee enthusiasts, remote workers, and local community members. The vibe should be cozy yet professional, artisanal but approachable.

Suggested color direction: Rich coffee browns as primary colors (#8B4513 saddle brown, #D2691E chocolate), warm cream and off-white neutrals (#F5F5DC beige, #FFF8DC cornsilk), with accent colors inspired by coffee culture - perhaps a warm gold (#DAA520 goldenrod) for highlights and a deep forest green (#228B22 forest green) for secondary elements. Include a pure white and charcoal gray for high contrast text needs.

Please ensure all colors meet WCAG AA accessibility standards when used for text, and provide suggestions for hover states and interactive elements.

Help me establish a typography system for my Underscores-based WordPress theme for a coffee shop. Please:
1. Recommend 2-3 Google Fonts that pair well together (headings + body text)
2. Create a modular scale for font sizes
3. Generate CSS custom properties for the font stack
4. Include proper font loading optimization
5. Set up responsive typography that scales well across devices

Brand personality: Warm, artisanal coffee shop that balances craftsmanship with approachability. The typography should feel handcrafted and authentic but still be highly readable for menus, blog posts, and contact information. Think modern rustic - not too fancy or pretentious, but with character and warmth.

Typography direction: Consider pairing a distinctive but readable serif or hand-lettered style font for headings (like Playfair Display, Crimson Text, or Amatic SC) with a clean, friendly sans-serif for body text (like Open Sans, Lato, or Source Sans Pro). The heading font should have personality that reflects the artisanal coffee culture, while the body font prioritizes readability for long-form content like blog posts about coffee origins or brewing methods.

Please ensure the fonts work well for:
- Large headings (shop name, section titles)
- Menu items and prices
- Body text for blog posts and descriptions
- Small text for hours, contact info, etc.

Include fallback fonts and consider loading performance for a smooth user experience.

I need to create a custom, clean, and fully responsive header for my Underscores-based WordPress coffee shop theme. Please:

1. Create the PHP template code (header.php) that includes:
   - Custom logo support that can be uploaded/changed via WordPress Customizer
   - Dynamic navigation menu that pulls from WordPress menu system
   - Proper WordPress hooks and functions
   - Mobile-first responsive structure
   - Semantic HTML5 elements

2. Add corresponding CSS that provides:
   - Clean, modern styling using my established color variables
   - Fully responsive design (mobile hamburger menu, desktop horizontal menu)
   - Smooth transitions and hover effects
   - Flexible logo sizing that works with different image dimensions
   - Proper alignment and spacing

3. Include JavaScript for:
   - Mobile menu toggle functionality
   - Smooth interactions and accessibility features
   - Keyboard navigation support

4. WordPress Customizer integration:
   - Logo upload/selection functionality
   - Basic header styling options (if needed)

5. Functions.php additions for:
   - Theme support declarations (custom-logo, menus)
   - Menu registration
   - Proper enqueuing of styles and scripts

Requirements:
- Logo should be easily replaceable through WordPress admin (Appearance > Customize)
- Menu should be manageable through WordPress admin (Appearance > Menus)
- Header should work on all screen sizes (mobile, tablet, desktop)
- Clean, coffee shop appropriate styling
- Fast loading and accessible
- Compatible with WordPress standards and best practices

Please provide all necessary code with clear instructions on which files to create/modify and where to place each piece of code in my Underscores theme structure.

I need to create a custom, clean, and fully responsive footer for my Underscores-based WordPress coffee shop theme. Please:

1. Create the PHP template code (footer.php) that includes:
   - Multiple widget areas for flexible content management
   - Dynamic copyright with automatic year updating
   - Social media links that can be managed via WordPress Customizer
   - Contact information section (address, phone, hours)
   - Secondary navigation menu support
   - Proper WordPress hooks and functions

2. Add corresponding CSS that provides:
   - Clean, modern styling using my established color variables
   - Fully responsive design (stacked columns on mobile, multi-column on desktop)
   - Proper spacing and typography hierarchy
   - Social media icon styling
   - Background treatment that complements the coffee shop aesthetic
   - Clear visual separation from main content

3. WordPress Customizer integration for:
   - Social media links (Facebook, Instagram, Twitter, etc.)
   - Contact information fields
   - Footer background color options
   - Copyright text customization

4. Functions.php additions for:
   - Footer widget area registration (3-4 widget areas recommended)
   - Footer menu registration
   - Social media customizer controls
   - Contact info customizer fields

5. Widget area suggestions for coffee shops:
   - About/Description widget area
   - Contact info and hours
   - Recent

I need to create a custom front-page.php template for my Underscores-based WordPress coffee shop theme with multiple engaging sections. Please:

1. Create the PHP template code (front-page.php) that includes:
   - Hero section with customizable background image, headline, and CTA button
   - "Our Story" section with customizable content and image
   - "The Experience" section displaying location, opening hours, and atmosphere
   - Customer testimonials section with rotating testimonials
   - Latest blog articles section (dynamic WordPress posts)
   - Call-to-action section (visit us, order online, etc.)
   - Special offers/featured products section

2. Add corresponding CSS that provides:
   - Modern, engaging styling using established color variables
   - Fully responsive design for all sections
   - Image optimization and proper aspect ratios
   - Card-based layouts for testimonials and blog posts
   - Visual hierarchy with proper spacing and typography

3. WordPress Customizer integration for:
   - Hero section content (headline, subtext, CTA button text/link)
   - Hero background image upload
   - Our Story section content and image
   - Location and hours information
   - Testimonials management
   - Featured products or specials
   - Social media integration

4. Additional sections to enhance the coffee shop experience:
   - Coffee menu preview or featured drinks
   - Community events or workshops section
   - Newsletter signup with coffee-related incentive
   - Google Maps integration for location
   - Photo gallery of the shop atmosphere

5. Functions.php additions for:
   - Custom post types (testimonials)
   - Customizer controls for all sections
   - Blog post queries for latest articles
   - Image size registrations for different sections

6. Interactive features:
   - Lazy loading for images
   - Mobile-optimized touch interactions
   - Accessibility features (alt text, keyboard navigation)

Requirements:
- All content must be manageable through WordPress admin/customizer
- Mobile-first responsive design
- Fast loading with optimized images
- SEO-friendly structure with proper headings
- Professional yet warm coffee shop aesthetic
- Easy for shop owners to update content
- Integration with blog posts for fresh content

Coffee shop context: Focus on creating an authentic, community-focused experience that showcases the craftsmanship, atmosphere, and personal touch that makes this coffee shop special. The page should convert visitors into customers while building the brand story.

Please provide all necessary code with clear instructions on file placement and include guidance on how to manage all content through WordPress admin.

I need to create a custom single.php template for my Underscores-based WordPress coffee shop theme that creates an engaging blog post reading experience. Please:

1. Create the PHP template code (single.php) that includes:
   - Clean, readable article layout with proper typography hierarchy
   - Featured image display with responsive sizing
   - Post meta information (date, author, categories, tags)
   - Social sharing buttons (Facebook, Twitter, Pinterest, Instagram)
   - Author bio box with avatar and description
   - Related posts section (based on categories/tags)
   - Fully styled comments section with threaded comment support
   - Custom comment form with coffee shop branding
   - Breadcrumb navigation
   - Next/Previous post navigation

2. Add corresponding CSS that provides:
   - Optimal reading experience with proper line spacing and margins
   - Responsive design that works on all devices
   - Styled blockquotes, lists, and other content elements
   - Image galleries and media formatting
   - Print-friendly styling
   - Comprehensive comments section styling including:
     * Individual comment containers with proper spacing
     * Comment author information and avatar styling
     * Threaded/nested comment indentation and visual hierarchy
     * Comment meta data (date, reply links) formatting
     * Comment content typography that matches article styling
     * Reply form styling that's consistent with main comment form
     * Pagination for comments when there are many
     * "No comments yet" state styling
   - Clean comment form styling with coffee shop aesthetic
   - Engaging related posts grid layout

3. Enhanced comments section features:
   - Coffee shop themed comment form placeholders and labels
   - Custom comment form fields styling (name, email, website, comment)
   - Form validation styling and error states
   - Submit button that matches site's CTA button design
   - Comment moderation notices and pending comment styling
   - Gravatar integration with fallback avatars
   - Admin/author comment highlighting and badges
   - Comment threading with proper visual nesting (2-3 levels deep)
   - Reply button styling and functionality
   - Comment number/count display

4. Coffee shop specific enhancements:
   - Recipe card styling for coffee recipes/brewing guides
   - Ingredient lists formatting for coffee-related posts
   - Photo gallery layouts for coffee shop events or behind-the-scenes content
   - Product recommendation boxes for featured coffee beans/equipment
   - Coffee rating system (if reviewing different beans or brewing methods)
   - Seasonal coffee content highlighting

5. SEO and engagement features:
   - Proper schema markup for articles and comments
   - Reading time estimation
   - Table of contents for longer posts
   - Social proof elements (share counts)
   - Email newsletter signup within posts
   - Coffee tip callout boxes or highlighted quotes

6. WordPress integration:
   - Custom fields support for recipe cards or special content
   - Category and tag styling specific to coffee topics
   - Integration with coffee shop's social media
   - Related products suggestions (if using WooCommerce)
   - Author profiles for different contributors (head barista, owner, etc.)
   - Comments system integration with WordPress comment settings

Requirements:
- Mobile-first responsive design with excellent readability
- Fast loading with optimized images and lazy loading
- Accessible design with proper headings and alt text
- SEO-optimized structure
- Social sharing integration
- Fully functional and beautifully styled comment engagement features
- Related content discovery
- Coffee shop branding integration using established color/font variables
- Easy content management through WordPress editor
- Support for different content types (standard posts, recipes, reviews, events)
- Comment system that encourages community interaction and discussion

Coffee shop context: Posts will include coffee education content, brewing guides, bean origin stories, shop events, seasonal drink announcements, and community stories. The comments section should feel welcoming and encourage coffee enthusiasts to share their experiences, ask questions, and engage with the community.

Please provide all necessary code with clear instructions on file placement and include any additional functions.php code needed for enhanced comment functionality and styling.

I need to create a custom page.php template for my Underscores-based WordPress coffee shop theme with a clean, centered layout that displays WordPress page content without additional styling. Please:

1. Create the PHP template code (page.php) that includes:
   - Centered content container that matches the width/styling of other website sections
   - Clean page wrapper with proper content area
   - Page title display with typography hierarchy
   - Main content area that displays WordPress page editor content without interference
   - Simple breadcrumb navigation (optional)
   - Minimal, clean structure

2. Add corresponding CSS that provides:
   - Centered layout consistent with other website sections
   - Proper container max-width and responsive behavior
   - Clean page title styling that matches site typography
   - Minimal content area styling that doesn't interfere with WordPress editor content
   - Let WordPress editor and page builder handle all content formatting and styling
   - Proper spacing and padding consistent with site design
   - Responsive design that works on all devices

3. Layout requirements:
   - Centered page layout matching other website sections
   - Consistent spacing and padding with site design
   - Clean, minimal approach that showcases page content
   - Proper typography hierarchy for page titles
   - White space and breathing room around content
   - No additional styling that conflicts with page editor content

4. WordPress integration:
   - Full compatibility with WordPress page editor (Classic and Gutenberg)
   - Support for page builders if used
   - Proper content output without filtering or modification
   - Featured image support (if needed)
   - Custom fields compatibility

Requirements:
- Centered layout consistent with website's section styling
- Completely blank content area for WordPress editor content
- Mobile-first responsive design
- Coffee shop branding integration using established color/font variables
- Easy content management through WordPress page editor
- No interference with WordPress editor content formatting
- Fast loading and accessible design