/* main.css */
@import url('tokens.css');

/* --- CSS RESET --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* 16px base */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-bg-primary);
  color: var(--color-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4 {
  color: var(--color-brand-primary);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  font-weight: 700;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }

p {
  margin-bottom: var(--space-4);
  color: var(--color-text-main);
}

.text-muted {
  color: var(--color-text-muted);
}

/* --- BUTTONS (Conversion Focused) --- */
.btn {
  display: inline-block;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: none;
}

/* The Primary Action Button (The "Book Now" Orange) */
.btn-primary {
  background-color: var(--color-accent-action);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Secondary Button (For "View Gallery" or "Amenities") */
.btn-secondary {
  background-color: var(--color-brand-primary);
  color: white;
}

.btn-secondary:hover {
  background-color: var(--color-brand-light);
}

/* --- LAYOUT UTILITIES --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section {
  padding: var(--space-16) 0;
}

.bg-secondary {
  background-color: var(--color-bg-secondary);
}

/* Simple Responsive Grid */
.grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

/* --- COMPONENT STYLES --- */

/* Header */
.site-header { padding: var(--space-4) 0; border-bottom: 1px solid #e2e8f0; }
.brand-name { font-weight: bold; color: var(--color-brand-primary); font-size: var(--text-lg); }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* Hero */
.hero { background-color: var(--color-bg-secondary); padding: var(--space-12) 0; text-align: center; }
.hero-img { width: 100%; height: 400px; object-fit: cover; margin-bottom: var(--space-6); }
.hero-title { margin-bottom: var(--space-2); }
.hero-subtitle { font-size: var(--text-xl); max-width: 800px; margin: 0 auto var(--space-6); }
.stats-bar { display: flex; justify-content: center; gap: var(--space-6); margin-bottom: var(--space-8); font-weight: 600; color: var(--color-text-muted); flex-wrap: wrap; }

/* Airbnb Elements */
.airbnb-rating { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.airbnb-star { color: #FF385C; }
.btn-airbnb { 
  background-color: #FF385C; color: white; box-shadow: var(--shadow-md); display: inline-flex; align-items: center; justify-content: center; 
  gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); text-decoration: none; font-weight: 600; transition: all 0.2s ease-in-out; border: none; cursor: pointer;
}
.btn-airbnb:hover { background-color: #E31C5F; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-large { font-size: var(--text-lg); padding: var(--space-4) var(--space-8); }
.icon-airbnb { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

/* Amenities & Content */
.amenity-card { background: white; padding: var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid #e2e8f0; }
.gap-small { gap: var(--space-4); }
.note-text { font-size: var(--text-sm); margin-top: var(--space-6); }

/* Footer */
.site-footer { padding: var(--space-8) 0; text-align: center; border-top: 1px solid #e2e8f0; }
.footer-title { margin-bottom: var(--space-2); }
.footer-links { margin-top: var(--space-4); }
.footer-links a { margin: 0 var(--space-2); color: var(--color-brand-primary); text-decoration: none; font-weight: 600; }
.footer-links a:hover { text-decoration: underline; }