@import "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
@import url("https://fonts.googleapis.com/css2?family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  --text-sans: "Figtree", sans-serif;
  --text-serif: "Unna", serif;
  --base-font: "Figtree", sans-serif;

  --background: #f2f2f2;
  --background-muted: #ffffff;
  --background-accent: #d7d7d7;
  --accent: #acacac;
  --accent-foreground: #939393;
  --foreground: #1d1c1a;
  --primary: #1d1c1a;
  --primary-hover: #2e2e2e;
  /* --primary-hover: #df6a2e; */
  --primary-foreground: #ffffff;

  --secondary: #f5b335;
  --secondary-muted: #fbbe75;

  --icon: #1d1c1a;

  --ease: cubic-bezier(0.78, 0.41, 0.36, 0.89);

  --border: var(var(--primary));

  --nav-background: #cdcdcd;
  --error: #c53232;

  --text-3xs: clamp(0.57rem, -0.15vi + 0.6rem, 0.49rem);
  --text-2xs: clamp(0.66rem, -0.13vi + 0.69rem, 0.58rem);
  --text-xs: clamp(0.76rem, -0.1vi + 0.78rem, 0.7rem);
  --text-sm: clamp(0.87rem, -0.05vi + 0.88rem, 0.84rem);
  --text-base: clamp(1rem, 0.01vi + 1rem, 1.01rem);
  --text-lg: clamp(1.15rem, 0.1vi + 1.13rem, 1.21rem);
  --text-xl: clamp(1.32rem, 0.22vi + 1.27rem, 1.45rem);
  --text-2xl: clamp(1.52rem, 0.37vi + 1.44rem, 1.74rem);
  --text-3xl: clamp(1.75rem, 0.58vi + 1.62rem, 2.09rem);
  --text-4xl: clamp(2.01rem, 0.85vi + 1.83rem, 2.5rem);
  --text-5xl: clamp(2.31rem, 1.19vi + 2.05rem, 3rem);
  --text-6xl: clamp(2.66rem, 1.63vi + 2.3rem, 3.61rem);
  --text-7xl: clamp(3.06rem, 2.18vi + 2.58rem, 4.33rem);
  --text-8xl: clamp(3.52rem, 2.88vi + 2.89rem, 5.19rem);

  --header-eyebrow-height: 2.5rem;
  --logo-background: #1e1e1e;
  --header-height: 5rem;
  --logo-width: 7rem;
  --logo-word-height: 30%;
  --logo-word-width: 80%;
  --logo-sun: 2.75rem;
  /* booking  */
  --bookingtabs-height: 4rem;

  --swiper-navigation-size: 2.5rem;
  --swiper-theme-background: var(--primary);
  --swiper-theme-color: #ffffff;
  --swiper-pagination-bullet-inactive-color: var(--accent);
  --swiper-pagination-color: var(--secondary);
  --container-size: clamp(1200px, 80vw, 1600px);
  --edge: 1.25rem;

  --orange: #df6a2e;

  --lifestyle: #ddaa95;
  --silver: #c1c1c1;
  --gold: #d1b562;
  --platinum: #d3dee2;
  --emerald: #93aba1;
  --ruby: #b57573;
  --diamond: #918786;
}

.dark,
[data-theme="dark"] {
  --background: #1d1c1a;
  --background-muted: #2e2e2e;
  --background-accent: #292c30;
  --accent: #585856;
  --foreground: #ffffff;
  --primary: #df6a2e;
  --primary-hover: #cd5b22;
  --primary-foreground: #ffffff;
  --nav-background: #151515;
  --icon: var(--secondary-muted);
  /* --secondary-muted: #2e2e2e; */

  --lifestyle: #4a2f25;
  --silver: #5a5a5a;
  --gold: #6e5b2a;
  --platinum: #535353;
  --emerald: #42534c;
  --ruby: #4d3939;
  --diamond: #2d2d2d;

  .signup-bottom {
    color: var(--foreground);
  }

  .btn-text::after {
    content: url("/sites/default/files/inline-images/icon/arrow-right-circled-orange.svg");
  }

  .header-first-left .text-bold {
    color: var(--primary);
  }
}

@media (min-width: 550px) {
  :root {
    --edge: 1.25rem;
  }
}

@media (min-width: 768px) {
  :root {
    --edge: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --edge: 2rem;
    --logo-width: 10rem;
  }
}