:root {
  /* bg */

  --bg-primary-dark: var(--color-secondary);
  --bg-primary-light: var(--color-gray-100);

  /* buttons */

  --start-button-bg: var(--color-secondary);
  --start-button-text: var(--color-white);

  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-secondary);
  --button-primary-text: var(--color-white);
  --button-primary-text-hover: var(--color-white);
  --button-primary-font-weight: var(--font-weight-regular);

  --button-secondary-bg: var(--color-secondary);
  --button-secondary-bg-hover: var(--color-primary);
  --button-secondary-text: var(--color-white);

  --button-nav-bg: var(--color-tertiary-90);
  --button-nav-bg-hover: var(--color-primary);
  --button-nav-text: var(--color-white);

  --button-form-bg: var(--color-secondary);
  --button-form-bg-hover: var(--color-primary);
  --button-form-text-hover: var(--color-white);
  --button-form-text: var(--color-white);

  --fancybox-backdrop-bg-color: var(--color-primary-20);
  --button-fancy-bg: var(--color-secondary);
  --button-fancy-bg-hover: var(--color-primary);
  --button-fancy-text: var(--color-white);

  --button-over-outline: 0 0 0 2px var(--color-white);

  /* texts */

  --text-primary-dark: var(--color-gray-900);
  --text-primary-light: var(--color-gray-100);

  --form-label-color: var(--color-gray-700);
  --form-title-font: var(--font-header-inner);
  --form-input-text-color: var(--color-primary);

  --title-text-color: var(--color-white); /*h1*/
  --subtitle-text-color: var(--color-quinary); /*h3*/
  --body-text-color: var(--color-white); /*p*/
  --body-home-text-color: var(--color-tertiary);

  /* switcher */

  --switcher-bg: var(--color-primary);
  --switcher-bg-hover: var(--color-secondary-90);

  --switcher-selector-bg: var(--color-secondary);
  --switcher-selector-text-color: var(--color-white);
  --toogle-avtive-bg: var(--color-secondary);

  /* popups */

  --popup-bg-color: var(--color-primary);
  --popup-title-text-color: var(--color-white);
  --popup-unit-title-text-color: var(--color-tertiary);
  --popup-route-text-color: var(--color-tertiary-90);
  --popup-desc-text-color: var(--color-quinary);

  --popup-value-text-color: var(--color-white);
  --popup-row-border-color: var(--color-tertiary-20);

  --popup-enquire-button-bg: var(--color-secondary);
  --popup-enquire-button-bg-hover: var(--color-tertiary);
  --popup-enquire-button-text-hover: var(--color-white);

  --popup-nav-bg-color: var(--color-primary);
  --popup-nav-bg-text-color: var(--color-white);

  /* menu */

  --menu-bg-top: var(--color-primary);
  --menu-bg-center: var(--color-primary-90);
  --menu-bg-bottom: var(--color-primary);

  --menu-item-bg-color-hover: var(--color-secondary-90);
  --menu-item-bg-color-active: var(--color-secondary);

  --menu-item-text-color: var(--color-white);

  /* inventory-list */

  --inventory-table-bg-color: var(--color-secondary-20);

  --inventory-filter-bg-color: var(--color-secondary-50);
  --inventory-filter-title-text-color: var(--color-quinary-70);
  --inventory-filter-label-text-color: var(--color-white);

  --inventory-header-bg-color: var(--color-primary-90);
  --inventory-header-text-color: var(--color-white);

  --inventory-rows-bg-color: var(--color-primary-20);
  --inventory-rows-text-color: var(--color-white);
  --inventory-rows-border-color: var(--color-tertiary-20);

  --inventory-disclaimer-text-color: var(--color-tertiary-30);

  /* other elements */

  --start-arrow-color: rgb(255, 255, 255);

  --hr-color: var(--color-secondary-90);
  --hr-height: 1.5px;
  --hr-margin: 2.5vh 0 !important;

  --hr-margin-map: 2.5vh 0 !important;
  --hr-color-map: var(--color-secondary-50) !important;

  --avaialable-status-color: var(--color-green);
  --reserved-status-color: var(--color-orange);
  --sold-status-color: var(--color-red);
  --future-status-color: var(--color-blue);

  --ul-bg-color: var(--color-primary-20);
  --ul-text-color: var(--color-white);

  /* ------------------------------- */

  /* ====== Sizes & Spacing ====== */
  --spacing-xxs: max(0.25rem, 4px);
  --spacing-xs: max(0.5rem, 6px);
  --spacing-sm: max(0.75rem, 10px);
  --spacing-md: max(1rem, 14px);
  --spacing-lg: max(1.5rem, 20px);
  --spacing-xl: max(2rem, 32px);
  --spacing-xxl: max(3rem, 48px);

  /* ====== Border Radius ====== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xlg: 24px;
  --radius-xxlg: 48px;
  --radius-round: 50%;

  /* ====== Shadows ====== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

  /* -------------------------------- */

  /* New add-on section */

  /* Gradients */
  --gradient-primary: linear-gradient(
    45deg,
    var(--color-primary-light-2),
    var(--color-primary)
  );
  --gradient-secondary: linear-gradient(
    45deg,
    var(--color-secondary-light-1),
    var(--color-secondary)
  );

  /* Border */
  --border-primary: 1px solid var(--color-primary);
  --border-secondary: 1px solid var(--color-secondary);

  /* Hover states */
  --hover-light: brightness(1.1);
  --hover-dark: brightness(0.9);
}