:root {
    --p-primary-color: #212529;
    --p-primary-contrast-color: #ffffff;
    --p-primary-50: #e9e9ea;
    --p-primary-100: #c8c9ca;
    --p-primary-200: #909294;
    --p-primary-300: #595c5f;
    --p-primary-400: #373b3e;
    --p-primary-500: #212529;
    --p-primary-600: #1e2125;
    --p-primary-700: #1a1e21;
    --p-primary-800: #171a1d;
    --p-primary-900: #121417;
    --p-surface-50: #ffffff;
    --p-surface-100: #ffffff;
    --p-surface-200: #ffffff;
    --p-surface-300: #ffffff;
    --p-surface-400: #ffffff;
    --p-surface-500: #ffffff;
    --p-surface-600: #e6e6e6;
    --p-surface-700: #cccccc;
    --p-surface-800: #b3b3b3;
    --p-surface-900: #8c8c8c;
}
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');

/* Base styles from index.html */
body {
  font-family: 'Quicksand', sans-serif;
  background-color: #FAF7F1;
  color: #5E5D5C;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
}

.font-heading {
  font-family: 'Cormorant Garamond', serif;
}

.font-body {
  font-family: 'Quicksand', sans-serif;
}

/* Scrollbar utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Parallax background */
.parallax-bg {
  background-image: url('reception/1.avif');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Animation classes */
.animate-entry {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.17, 0.55, 0.55, 1), transform 0.8s cubic-bezier(0.17, 0.55, 0.55, 1);
}

.animate-entry.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Color variables to match index.html design */
:root {
  --background-color: #FAF7F1;
  --text-primary: #5E5D5C;
  --text-secondary: #333;
  --secondary: #8B7355;
  --secondary-light: #F5F2ED;
  --primary: #6B5B73;
}

/* Override some PrimeFaces/Octorate styles to match Up Hotel branding */
.surface-100 {
  background-color: var(--background-color) !important;
}

/* Header/navigation styling to match Up Hotel */
.border-primary {
  border-color: var(--secondary) !important;
}

/* Button styling to match Up Hotel design */
.p-button {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  font-family: 'Quicksand', sans-serif !important;
}

.p-button:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Form elements styling */
.p-inputtext {
  font-family: 'Quicksand', sans-serif !important;
  border-color: #ddd !important;
}

.p-inputtext:focus {
  border-color: var(--secondary) !important;
  box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.2) !important;
}

/* Card and panel styling */
.p-panel .p-panel-header {
  background-color: var(--secondary-light) !important;
  border-color: var(--secondary) !important;
  color: var(--text-secondary) !important;
  font-family: 'Cormorant Garamond', serif !important;
}

.p-panel .p-panel-content {
  background-color: white !important;
  color: var(--text-primary) !important;
  font-family: 'Quicksand', sans-serif !important;
}

/* Calendar styling */
.p-datepicker {
  font-family: 'Quicksand', sans-serif !important;
}

.p-datepicker .p-datepicker-header {
  background-color: var(--secondary) !important;
  color: white !important;
}

.p-datepicker .p-datepicker-today > span {
  background-color: var(--secondary-light) !important;
  color: var(--text-secondary) !important;
}

/* Table styling */
.p-datatable .p-datatable-header {
  background-color: var(--secondary-light) !important;
  border-color: var(--secondary) !important;
  color: var(--text-secondary) !important;
  font-family: 'Cormorant Garamond', serif !important;
}

/* Accordion styling */
.p-accordion .p-accordion-header .p-accordion-header-link {
  background-color: var(--secondary-light) !important;
  border-color: var(--secondary) !important;
  color: var(--text-secondary) !important;
  font-family: 'Cormorant Garamond', serif !important;
}

/* Text color overrides */
.text-900, .text-800, .text-700 {
  color: var(--text-primary) !important;
}

/* Background overrides */
.bg-white {
  background-color: var(--background-color) !important;
}

/* Responsive typography */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
  }
}