/* ============================================
   THE VISITOR'S GUIDE - Brand Typography & Colors
   ============================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700;900&display=swap');

/* CSS Variables for Brand Colors */
:root {
  /* Light Mode Colors */
  --brand-primary: #FF6B6B;
  --brand-secondary: #FFB700;
  --brand-gradient: linear-gradient(135deg, #FF6B6B, #FFB700);
  
  /* Brand Colors (for compatibility) */
  --brand-red: #FF6B6B;
  --brand-gold: #FFD93D;
  --brand-blue: #4A90E2;
  
  /* Dark Mode Colors */
  --brand-primary-dark: #FF8A8A;
  --brand-secondary-dark: #FFD700;
  --brand-gradient-dark: linear-gradient(135deg, #FF8A8A, #FFD700);
  
  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-primary-dark: #f0f0f0;
  --text-secondary-dark: #999999;
  
  /* Background Colors */
  --bg-light: #f8f9fa;
  --bg-dark: #0f0f0f;
  
  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Typography Styles */
.brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 1px;
}

.brand-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--text-primary);
}

.brand-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.brand-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

/* Dark Mode */
[data-theme="dark"] {
  --brand-primary: #FF8A8A;
  --brand-secondary: #FFD700;
  --brand-gradient: linear-gradient(135deg, #FF8A8A, #FFD700);
  --text-primary: #f0f0f0;
  --text-secondary: #999999;
  --bg-page: #0f0f0f;
  --bg-cream: #1a1a1a;
  --bg-accent: #252525;
  --bg-overlay: rgba(15, 15, 15, 0.95);
  --border-soft: #333333;
  --border-medium: #444444;
  --border-strong: #555555;
}