@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;
	--base-font-size: 16px;
	--background: #ffffff;
	--background-muted: #f2f2f2;
	--background-accent: #d7d7d7;

	--booking-widget: #f0f1ec;
	--bookingtabs-background: var(--accent);

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

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

	--border: var(var(--primary));
	--nav-background: #cdcdcd;

	--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.25rem;
	--logo-background: #1e1e1e;
	--header-height: 4.5rem;

	/* 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);

	--logo-background: #d06433;
}

.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;
	--booking-widget: var(--background-accent);
	--bookingtabs-background: var(--background);

	.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);
	}
}