/* Global styles for Marrakesh Insider */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  min-height: max(884px, 100dvh);
  background-color: #1c1916; /* Warm light-dark base */
  color: #f7eee7;
}

.max-w-container-max {
  max-width: 1280px;
}

.px-margin-mobile {
  padding-left: 20px;
  padding-right: 20px;
}

.gap-gutter {
  gap: 24px;
}

.pt-section-gap {
  padding-top: 120px;
}

.pb-section-gap {
  padding-bottom: 120px;
}

.py-section-gap {
  padding-top: 120px;
  padding-bottom: 120px;
}

.font-display,
.font-headline-lg,
.font-headline-sm,
.font-headline-md {
  font-family: "EB Garamond", serif;
}

.font-body-md,
.font-body-lg,
.font-label-lg {
  font-family: "DM Sans", sans-serif;
}

.font-label-lg {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.font-body-md {
  font-size: 16px;
  line-height: 1.6;
}

.font-body-lg {
  font-size: 18px;
  line-height: 1.6;
}

.text-headline-md {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
}

.text-headline-lg {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .md\:px-margin-desktop {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.soft-shadow {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.bg-background,
.bg-surface {
  background-color: #1c1916 !important;
}

.bg-surface-container-lowest {
  background-color: #201d19 !important;
}

.bg-surface-container-low {
  background-color: #24211d !important;
}

.bg-surface-container,
.bg-surface-container-high {
  background-color: #29251f !important;
}

.bg-surface-container-highest {
  background-color: #302b24 !important;
}

.bg-secondary {
  background-color: #335f5f !important;
}

.text-secondary {
  color: #87d5d0 !important;
}

.border-secondary {
  border-color: #6aa9a5 !important;
}

.focus\:border-primary:focus {
  border-color: #ffb59d !important;
}

.border-secondary\/10 {
  border-color: rgba(135, 213, 208, 0.14) !important;
}

.border-secondary\/20 {
  border-color: rgba(135, 213, 208, 0.24) !important;
}

.bg-secondary-container {
  background-color: #244b4b !important;
}

.bg-secondary-container\/30 {
  background-color: rgba(70, 118, 116, 0.34) !important;
}

.bg-secondary-container\/90 {
  background-color: rgba(50, 95, 94, 0.92) !important;
}

.bg-surface\/10 {
  background-color: rgba(255, 244, 236, 0.08) !important;
}

.bg-surface\/95,
.bg-surface-container-lowest\/95 {
  background-color: rgba(28, 25, 22, 0.94) !important;
}

.from-surface {
  --tw-gradient-from: #1c1916 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(28, 25, 22, 0) var(--tw-gradient-to-position) !important;
}

.text-on-surface,
.text-on-background {
  color: #f7eee7 !important;
}

.text-on-surface-variant {
  color: #d8c8be !important;
}

.text-on-secondary,
.text-on-secondary-container,
.text-on-secondary-fixed-variant {
  color: #f4ede8 !important;
}

.text-secondary-fixed,
.text-secondary-fixed\/90,
.text-secondary-fixed\/85 {
  color: rgba(218, 250, 247, 0.92) !important;
}

.text-primary {
  color: #ffb59d !important;
}

.bg-primary {
  background-color: #c96747 !important;
}

.hover\:bg-primary:hover {
  background-color: #c96747 !important;
}

.border-primary {
  border-color: #ffb59d !important;
}

.border-primary\/40 {
  border-color: rgba(255, 181, 157, 0.42) !important;
}

.hover\:bg-primary\/10:hover {
  background-color: rgba(255, 181, 157, 0.1) !important;
}

.hover\:bg-secondary-container:hover {
  background-color: #2d5a59 !important;
}

.custom-shadow,
.shadow-soft {
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.24) !important;
}

.border-outline\/10,
.border-outline-variant\/30,
.border-outline-variant\/40,
.border-outline-variant\/60 {
  border-color: rgba(255, 238, 229, 0.14) !important;
}

.hero-image-animate + div + div + div {
  background: linear-gradient(
    90deg,
    rgba(28, 25, 22, 0.82) 0%,
    rgba(28, 25, 22, 0.66) 34%,
    rgba(28, 25, 22, 0.28) 72%,
    rgba(28, 25, 22, 0.1) 100%
  ) !important;
}

main img:not([src$="logo.png"]) {
  filter: brightness(1.08) saturate(0.96) contrast(0.92);
}

.reveal-up {
  animation: revealUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-image-animate {
  animation: heroImageDrift 24s ease-in-out infinite alternate;
  filter: brightness(1.12) saturate(0.92) contrast(0.9);
  transform-origin: center;
  will-change: transform;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImageDrift {
  from {
    transform: scale(1.02) translate3d(-0.75%, -0.5%, 0);
  }

  to {
    transform: scale(1.055) translate3d(0.75%, 0.5%, 0);
  }
}