:root {
  --custom-red: #FF494E;
  --custom-dark-red: #E90043;
  --custom-gray: #F5F5F5;
  --custom-green: #00AC47;
  --custom-blue: #4285F4;
  --custom-light-blue: #009FC4;
  --custom-yellow: #F5B02E;
  --black: #000;
  --white: #fff;
}

/* Color utilities to match React Tailwind classes */
.bg-custom-red { background-color: var(--custom-red) !important; }
.bg-custom-dark-red { background-color: var(--custom-dark-red) !important; }
.bg-custom-gray { background-color: var(--custom-gray) !important; }
.bg-custom-green { background-color: var(--custom-green) !important; }
.bg-custom-blue { background-color: var(--custom-blue) !important; }
.bg-custom-light-blue { background-color: var(--custom-light-blue) !important; }
.bg-custom-yellow { background-color: var(--custom-yellow) !important; }

.text-custom-red { color: var(--custom-red) !important; }
.text-custom-dark-red { color: var(--custom-dark-red) !important; }
.text-custom-gray { color: var(--custom-gray) !important; }
.text-custom-green { color: var(--custom-green) !important; }
.text-custom-blue { color: var(--custom-blue) !important; }
.text-custom-light-blue { color: var(--custom-light-blue) !important; }
.text-custom-yellow { color: var(--custom-yellow) !important; }

.border-custom-red { border-color: var(--custom-red) !important; }
.border-custom-dark-red { border-color: var(--custom-dark-red) !important; }
.border-custom-gray { border-color: var(--custom-gray) !important; }
.border-custom-green { border-color: var(--custom-green) !important; }
.border-custom-blue { border-color: var(--custom-blue) !important; }
.border-custom-light-blue { border-color: var(--custom-light-blue) !important; }
.border-custom-yellow { border-color: var(--custom-yellow) !important; }

/* Offcanvas custom background gradient matching side-drawer */
.bg-drawer-gradient {
  background: linear-gradient(to bottom, #E0D72A, #B0DF2E, #80E732) !important;
}

/* Mobile-first centered app layout */
.app-container {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--white);
  color: var(--black);
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.sticky-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 500px;
  background-color: var(--custom-gray);
  border-top: 1px solid #ddd;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}

/* Desktop layout wrappers */
.desktop-main-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background-color: #1a1a1a;
}

.desktop-sidepart {
  flex-grow: 1;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.desktop-sidepart-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}