/* Landing tokens from shorja-storefront-custom.html */
.landing-root {
  --primary-dark: #123D35;
  --primary: #158466;
  --primary-bright: #28A980;
  --primary-soft: #EAF8F3;
  --accent: #F5B82E;
  --accent-dark: #D49612;
  --accent-soft: #FFF7DF;
  --primary-on: #FFFFFF;
  --accent-on: #171C35;
  --yellow1: #FFFBEE;
  --yellow2: #FFF7DF;
  --yellow3: #FDE8A8;
  --yellow4: #F9D66C;
  --yellow5: #F5B82E;
  --yellow6: #D49612;
  --bg: #F8FBFA;
  --surface: #FFFFFF;
  --ink: #17211F;
  --muted: #68736F;
  --line: #DCE6E2;

  --color-primary: #158466;
  --bs-primary-rgb: 21, 132, 102;
  --color-primary-: #158466;
  --bs-primary--rgb: 21, 132, 102;
  --color-primary-400: #28A980;
  --bs-primary-400-rgb: 40, 169, 128;
  --color-primary-500: #158466;
  --bs-primary-500-rgb: 21, 132, 102;
  --color-primary-600: #123D35;
  --bs-primary-600-rgb: 18, 61, 53;

  --color-secondary: #F8FBFA;
  --bs-secondary-rgb: 248, 251, 250;
  --color-secondary-500: #F8FBFA;
  --color-tertiary: #EAF8F3;
  --bs-tertiary-rgb: 234, 248, 243;
  --color-quaternary: #FFFBEE;
  --bs-quaternary-rgb: 255, 251, 238;

  --color-gray: #68736F;
  --bs-gray-rgb: 104, 115, 111;
  --color-gray-400: #68736F;
  --bs-gray-400-rgb: 104, 115, 111;
  --color-gray-600: #68736F;
  --bs-gray-600-rgb: 104, 115, 111;
  --color-gray-800: #123D35;
  --bs-gray-800-rgb: 18, 61, 53;
  --color-gray-900: #123D35;
  --bs-gray-900-rgb: 18, 61, 53;

  --font-family-primary: "IBM Plex Sans Arabic", Lexend, sans-serif;
  --font-family-secondary: "IBM Plex Sans Arabic", Sunsive, serif;
  --font-family-tertiary: "IBM Plex Sans Arabic", Lexend, sans-serif;

  background-color: #F8FBFA;
  color: #17211F;
}

.landing-root .btn-primary,
.landing-root .bg-primary {
  --bs-btn-bg: #158466;
  --bs-btn-border-color: #158466;
  --bs-btn-hover-bg: #28A980;
  --bs-btn-hover-border-color: #28A980;
  --bs-btn-color: #FFFFFF;
}

.landing-root .text-primary {
  color: #158466 !important;
}

.landing-root .text-clay,
.landing-root h1 .text-primary,
.landing-root h2 .text-primary,
.landing-root h3 .text-primary,
.landing-root .h1 .text-primary,
.landing-root .h2 .text-primary,
.landing-root .h3 .text-primary,
.landing-root .display-5 .text-primary,
.landing-root .display-6 .text-primary {
  color: #F5B82E !important;
}

.landing-root .display-5,
.landing-root .h1,
.landing-root .h2,
.landing-root .h3,
.landing-root .h4,
.landing-root .h5,
.landing-root .h6,
.landing-root h1,
.landing-root h2,
.landing-root h3,
.landing-root h4,
.landing-root h5,
.landing-root h6 {
  color: #123D35;
}

.landing-root .text-gray-400,
.landing-root .text-gray-600,
.landing-root .text-opacity-70,
.landing-root .text-opacity-75,
.landing-root .text-opacity-60 {
  color: #68736F;
}

.landing-root a:not(.btn):hover {
  color: #158466;
}

.landing-root .uc-logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

.landing-brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #123D35;
  background: #FFF7DF;
  border-radius: 999px;
  white-space: nowrap;
}

.landing-root .bg-white {
  background-color: #FFFFFF !important;
}

.landing-root .from-tertiary {
  --uc-gradient-from: #EAF8F3 !important;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}

.landing-root .to-tertiary {
  --uc-gradient-to: #EAF8F3 !important;
}

.landing-root .from-quaternary {
  --uc-gradient-from: #FFFBEE !important;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}

.landing-root .to-quaternary {
  --uc-gradient-to: #FFFBEE !important;
}

.landing-root #uc-footer {
  background-color: #123D35;
  color: #F8FBFA;
}

.landing-root #uc-footer a,
.landing-root #uc-footer p,
.landing-root #uc-footer .text-gray-400 {
  color: #F8FBFA;
}

.landing-root #uc-footer a:hover {
  color: #F5B82E;
}

/* Lenis smooth scroll (landing layout only) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}